I had a header with background color already set. Then I added a background-image to the page and suddenly, my header background isn't showing up. The words are still there and visible but the box of color has become invisible. It's something to do with the background-image because if I remove the image the box reappears. I can post code if needed. Thanks for the help.
Sorry guys, I'm new to this site.
So I figured out where I went wrong. I had posted the img under * in css. I feel pretty silly when I realized it. I fixed it by adding
body
{
background:url("example.jpg")
}
Worked like a charm. Thanks for the help everyone.
Related
would really appreciate some help please!
I used some lightbox code I found online (like I do for every bit of code I need, the noob I am), but when you open something in the lightbox you can still scroll the page and see some of the content behind. I made the z-index like 9999 or whatever, but that's obviously not the issue.
Would anyone mind having a look and letting me know how to fix? Thanks in advance!
Site: https://runplymouthharbour.co.uk/test#step12 (click image to open in lightbox and you can see content below it showing on top)
You should try to include a code sample in your questions as it makes it easier to answer.
But to answer the question, your z-index fix won't work as your class row__container has z-index: 1 rule, which overrides the z-index you set in the span that displays your image (it does this because the row__container div is a parent of the span).
To fix, remove that z-index: 1 from row__container.
Hi I would like my background image to wrap up the content/text inside it. The text seems to overflow from the background image and overlaps other text. It all works well on desktop but when I try to open Codepen in my iPhone, it didnt turn out as how it is expected to be. Please refer to pictures I attach here.
`https://codepen.io/sharonloh/full/pBrdRd`
I am new to coding and I have tried various ways after trying to search for solution but nothing seems to work.
Text overflowing from background image
From the picture you posted, there are various potential resolutions.
The first potential issue is that you have set a background image but not set other background attributes.
One way to resolve your issue would be to add a repeat to your css:
background-image: (your image);
background-repeat: repeat;
Add this to your css for the image/background class. If you only want the image to repeat vertically, you can use repeat-y instead of repeat. Similar for horizontal/repeat-x. Another way would be to use background-size:cover.
If you only want it to repeat on smaller screens you can add a media-query and add the extra attribute there.
Do add your css/html in future (now would be preferable! You can edit your question to add code). It helps to give a clearer picture of how to resolve the problem.
Hope this helps
Hello once again :) !
Can anyone accidently help me with this problem.
I saw very few sites before, but never bookmarked any of these.
If I have body background, fixed header and inner background, where the content is...
And if I want to scroll down to see more content/inner background, my image goes above header behind and I don't know how to make it to disappear behind headers top margin. Anyone can help me with this , please ?
Images:
Normal body background, fixed header and inner background below header
http://screensnapr.com/v/HbcNXA.png
Body background, fixed header and scrolled inner background below header, went above header's position.
http://screensnapr.com/v/TKVVuy.png
I know my English is not good enough to explain this... But let's say.
"Hey I am content background, I am standing below header and when someone scrolls me, I am disappearing at the start of header's position." :)
Thanks!
EDIT:
http://jsfiddle.net/WbtQd/
Scroll and you will notice what I want.
EDIT 2:
Seems like someone play with fiddle... Anyway, here is site example:
http://www.monofactor.com/portfolio/mcfc-auctions/
Except that my header have lets say: top: 50px;
So if we add on his site top: 50px; even he have same problem like me :)
http://snpr.cm/OrXCWa.png
EDIT 3:
http://snpr.cm/GNZaGd.png
I; not sure if I understood you completely. You mean that whenever you scroll your page, the main body passes under the header. probably this is because the header is fixed. You can try to make your main body div scrollable. This way, whenever you scroll down, only this specific div will scroll.
Im not sure what your trying to achieve exactly, but zindex in css can make items appear above others. Add this to the header css code:
#yourheaderid {
z-index:10;
}
I have created a jsfiddle of how you should markup your fixed header and the css to go with it.
http://jsfiddle.net/LYT6V/
I'm assuming this is the result you were looking for?
I am working with this page.
http://www.careersinmusic.com/aaaa-testing-link.aspx
So when my main issue is the invisble area at the bottom. I would like it to be white, but I cant figure out how to modify the area.
Does anyone know where I can change this to white?
Thanks
PS. Also the scroll bar is an issue. The image I want to show is 986px tall.
Thanks again.
add #cboxContent{background-color: white} to your stylesheet
For some reason the background on my website is not loading fully. Randomly, not all the time, the website will load with white rectangles around the content of the website. Check out this screenshot to get a better picture, or visit www.thinkitpostit.com to see if it randomly happens for you. Thanks in advance!
I see you are using a
width:800px;
on your body tag.
This could possibly cause some trouble since the background color is placed on the body tag.
I would generally recommend to not use any width or height properties on the body tag.