Jump to content

Making images fit in boxes (pages)


Hawtsauce

Recommended Posts

Posted

I have a slight problem and I'm hoping the gurus here can help me with it

I'm trying to get an image to completely fill the transparent box. Notice how the image in this picture

Screenshot_1.png.2b6d9c828a3aebc2c85a6874e99313ed.png

I want it to look like this, with the rounded edges.

Screenshot_2.png.9cb70c203096eeaf16aa92b14d8176df.png

Thanks in advance

-Brett.

Posted

If you have firebug you can play with the CSS in realtime and adjust till you see what will expand the image to look as you desire

Posted
23 hours ago, superj707 said:

If you have firebug you can play with the CSS in realtime and adjust till you see what will expand the image to look as you desire

Or if using Chrome, hit F12 to use the Dev Tools to do the same.

Posted

The problem is you have the background on the body element and what you need it in is the content wrapped.

 

Move the background to the class

.contentWrapper {
background: #dcdfe2 url("http://hawtsauce.gg/uploads/monthly_2017_04/2015-04-16_00021.jpg.627b62786c4a4dd415e94f428f554a84.jpg") center center no-repeat / fill;
}

The semantics on the sizing is something that you'll want to play with a little. I prefer cover myself but the sizing you have it on appears to be fill over cover. You will also want to add some padding for the left and right and remove the background from the body. @Hawtsauce

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...