Jump to content

Making images fit in boxes (pages)


Recommended Posts

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


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


Thanks in advance


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites


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

  • Recently Browsing   0 members

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