CODEWITHSUNDEEP
cssbackgroundresponsive-design
Gearu
Gearu

Reputation: 654

full width background to have top margin to not cut off top of image (wp-supersized)

I'm using wp-supersized to set a full width background that dynamically resizes. http://wordpress.org/extend/plugins/wp-supersized/

Here is what I have implemented: http://www.preview.sharonblance.com/

I have a fixed height header with height of 154px, and I want the top of the image to fill the screen from the bottom of the header, so that the top of the image isn't getting cut off.

I think that the plugin uses the browser full height though and I want to try to change this. Can anyone suggest how I could do this?

Upvotes: 2

Views: 803

Answers (3)

Adal
Adal

Reputation: 620

Hopefully it's never too late to answer one of these. My response is inspired by this post, that unfortunately didn't work for me, but let to a solution: https://github.com/buildinternet/supersized/issues/72#issuecomment-6427232

First, you need to add this javascript (I placed it right after the $.supersized call):

$('#supersized li').height($(window).height() - 154);

Then, add some CSS:

#supersized li { top: 154px !important; }
#supersized li img {
    width: auto !important;
    max-height: 100% !important;
    top: 0 !important;
}

Finally, you might want to disable the supersized overlay while debugging:

#supersized_overlay { display: none !important; }

Good luck!

Upvotes: 1

RysiePops
RysiePops

Reputation: 1

I guess this is already solved but here it is anyway!

find your supersized.css file and edit as follows:

#supersized img {
padding-top:154px;
}

Upvotes: 0

Gopikrishna
Gopikrishna

Reputation: 857

#supersized li for this class add top: 154px; I mean height of the header. hope it will work.

Upvotes: 0

Related Questions