5

A similar question has been asked many times (how to place text over an image) but every solution says make a relative positioned container and place image and text inside.

But what if the container needs to be absolute??

I want the image to be absolute in order to span the full width of the page, without being limited by the wrapper's width: Wrapper has set width, the image container should ignore this and be full screen, and the text should float above the image.

Here is a fiddle in which the image isn't ignoring the wrapper's width

.splash_image { position: relative; left: 0; top: 2%; height: 600px; overflow: hidden; z-index: 1; } .splash_image img { width: 100%; position: absolute; } .splash_title { color: red; position: absolute; } .wrapper { width: 50%; }
<div class="wrapper"> <div class="splash_image"> <img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image"> <div class="splash_title">Test title to go here on image</div> </div> </div>

Improve this question
2
  • So remove position: relative from .splash_image Commented May 12, 2015 at 16:58
  • What would be the default positioning of .splash_image? When I remove relative, it no longer has an affect on the image overflow. For instance, if you change the .splash_image height to 60px instead of 600 and remove position relative from .splash_image, it does not crop jsfiddle.net/2tpbx12x/3 Commented May 12, 2015 at 17:02

4 Answers 4

Reset to default
4

You set relative positioning on the image container, so even though you've positioned the image absolutely, it's being positioned absolutely within a relative positioned container. The container should be positioned absolutely if I am understanding what you're looking for:

.splash_image{ position:absolute; left:0; top:2%; height:600px; width:100%; overflow: hidden; z-index: 1; } .splash_image img{ width:100%; } .splash_title{ color:red; z-index: 88; position:absolute; top:0; left:0; }

Updated Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you! I incorrectly thought the img needed a defined position, so this method never made it in my series of combinations.
3

There are multiple ways to accomplish this. Here is a simple answer:

.splash_image { position: absolute; left: 0; top: 2%; height: 600px; overflow: hidden; z-index: 1; } .splash_image img { width: 100%; } .splash_title { color: red; position: absolute; z-index: 2; } .wrapper { width: 50%; }
 <div class="splash_image"> <img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" /> </div> <div class="wrapper"> <div class="splash_title">Test title to go here on image</div> </div>

https://jsfiddle.net/jonnysynthetic/2vqgab7t/

However, you could also try setting the image as a background to the parent element as well. I wasn't sure of the scope of what this is in or a part of, so I wanted to give you the simple answer first.

Improve this answer

Comments

1 
.splash_image{ left: 0; top: 2%; overflow: hidden; width: 100%; z-index: 1; height: 100%; } .splash_image img{ width:100%; position:absolute; } .splash_title{ color: red; z-index: 88; position: absolute; top: 50%; left: 50px; right: 0; bottom: 0; margin: auto; } .wrapper{ width: 50%; height: 150px; position: relative; }

https://jsfiddle.net/2tpbx12x/5/

Improve this answer

Comments

0

try this:

 .splash_image img{ width:100%; position:fixed; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.