Page to have full-width images (while wrap to stay at 960px)

I've got a site that limits each page to 960px wide (via wrap and inner classes).

I want my images to got full browser width. They are currently 100% width but are limited by the restrictions in the wrap and inner styles so it is keeping them to 960px wide.

What styling can I do to release the image from those restrictions and allow them to freely sit 100% wide and actually go the full width of a browser window?

  • Predrag Dubajic

    Hey Timmy,

    Hope you're doing well today.

    There are few things that pop in my mind that you can try.

    If you are using an image tag to show your image you can set one holder around it and set to larger width and position absolute, so the html looks something like this:

    <div class="image-holder">
    	<img src="yourimage.png"/>
    </div>

    And the css should look like this:

    .image-holder {
        position: absolute;
        width: 1920px;
    }
    
    .image-holder img {
        width: 100%;
    }

    There is and other solution you can try which has a image set as background in css, the html would look like this:
    <div class="image-holder"></div>
    And the css code would be something like this:

    .image-holder {
        padding: 40px 1000px 40px 1000px;
        margin: 0 -1000px;
        background-image: url(yourimage.png);
        background-repeat: repeat;
        background-position: center;
    }

    Hope this helps.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.