javascript - Full Width Image With Smaller Parent -


I am trying to break the image with a page design to fill the full browser width and scale with resizing in CMS On the kind of system I am They also have text content on the images. It would be great, but not necessarily.
Slideshow can do this for slideshow, but I have not seen anything to push just one image.
CMS can be output page such as:

    

... more or less

You can get this very easily with background: url () on your div example To see:

On the code:

  .image {background: url ('http: / / 37.media.tumblr.com/e615708905cc9df81f901c06ae4afe1e/tumblr_n21ltnVLtz1st5lhmo1_1280.jpg '); Height: 300px; Status: Relative; }   

What happens is that the device has been blocked as a default view, so it will be extended through the entire page.

Now, how to add text to the image? You can only put it inside the box, but for better control I can give it a full position. Here's the bella:

  .image h2 {status: absolute; Top: 125px; Correct: 50px; }   

In addition, if you want to save your image to repeat, when it is too small, then you can do something like this:

  background-repeat: no -repeat; Background size: Cover;   

Fiddle:

And also, if you want better control over the content inside the image. You can add an extra diva and give it some style. Here's how:

Edit:

To make it a full screen, there is no white space, make sure the body's "soft reset" Do it. (Margin and Padding: 0)

The Ultimate Bella:



Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -