7 replies [Last post]
zelionprime
zelionprime's picture
Offline
newbie
san antonio
Last seen: 7 years 35 weeks ago
san antonio
Timezone: GMT+2
Joined: 2013-10-09
Posts: 4
Points: 5

I am a noob and i've been searching for days on how to insert a full width image that spans the width of the browser.

I am attempting to create a custom version of the "full-width (no slider) page template" from the theme I am using. The problem, as i believe, is that there is a css class that governs the width of the body of content and it is constraining my image to 960px (#container.full-width is set to 960px). I'm at knowledgable enough to know that anything I put inside the a div that is set to class "full-width" will be constrained to 960px and the margin will not begin on the far left margin.

My question is, how do I override that?

the #container.full-width is set at 960px. what do I need to override in order to get what I want?

Any help is appreciated.

link. www.lensoutloud.com/test-layout
css: www.lensoutloud.com/file/style.css

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Try this on the image, it's

Try this on the image, it's not exactly what you want but might give you something to think about.

position: fixed;
top: 0;
left: 0;
width: 100%;

zelionprime
zelionprime's picture
Offline
newbie
san antonio
Last seen: 7 years 35 weeks ago
san antonio
Timezone: GMT+2
Joined: 2013-10-09
Posts: 4
Points: 5

Thanks for responding Tony, I

Thanks for responding Tony,

I tried this code in Wordpress WSYWIG and it didn't work

<img position: fixed; top: 0; left: 0; width: 100%; src="http://lensoutloud.com/wp-content/uploads/2013/06/lizanne-desmond-engagement-banner3.jpg">

Would you need to see more the css to make a guess Tony?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

You would have to use: <img

You would have to use:
<img style="position: fixed; top: 0; left: 0; width: 100%;" src="http://lensoutloud.com/wp-content/uploads/2013/06/lizanne-desmond-engagement-banner3.jpg">

zelionprime
zelionprime's picture
Offline
newbie
san antonio
Last seen: 7 years 35 weeks ago
san antonio
Timezone: GMT+2
Joined: 2013-10-09
Posts: 4
Points: 5

Ahhh I see what you mean. I

Ahhh I see what you mean. I used that code and it span the image full screen but it stuck it to the top of the browser, ergo, "fixed". Wow, this is a real pain in the ass. There has be some sort of override that can be done.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

There are things that can be

There are things that can be done.
You could change the top value to position it lower on the page.

zelionprime
zelionprime's picture
Offline
newbie
san antonio
Last seen: 7 years 35 weeks ago
san antonio
Timezone: GMT+2
Joined: 2013-10-09
Posts: 4
Points: 5

I tried that but it worked

I tried that but it worked out horribly. It's covering the text content I have there on the page. Any other suggestions?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

You could use JavaScript to

You could use JavaScript to calculate the image height and move the other elements down.
Or move the image outside of the container so it sis at the same level as the header, section and container