I'm trying to build a website, so I used a Bootstrap template (this one). It's an empty template with just a background image that covers the whole page (I took the navbar away).
I just tried entering random text in the html body section, and then this problem appears.
Screenshot of the problem
The code from the template is untouched (besides deleting the navbar). I just added a common html paragraph.
I want to get rid of that white line, so only the text appears above the background, not the background. I've tried setting the body style to background-color: transparent, tried tweaking position, z-index and whatnot and the white line does not disappear. Googling has not helped.
I would appreciate your help of how to get rid of this!
The background colour of the content you've added is being computed from the background colour of the body tag.
The problem with that template is that the background image is being placed on the html tag rather than the body. You can try placing the full class on the body.
<body class="full">
Look at the font properties. If the font properties are clear, then back up and examine the paragraph, li, ul, block or div.
Related
I needed to turn my image into a hyperlink, so I wrapped the tag around it. For some reason, only the bottom part of the image is clickable for the hyperlink. The rest of the image won't do anything.
This is my code:
<img src="image-here">
change width or height may be that is the problem
I am using jquery and ajax to load different pages into my index page. links are targeted to open in a specific DiV and for some reason Every page that I create seems to have this white border at the top. I removed the padding from the css but for some reason every page that I load into the div pops up with white border at the top with the text in it. I want to remove this white border and align the content area to the center. Please help me
the code is a bit much to post please visit my website for a live view... only working links are Roster, and Labels....
http://www.trillumonopoly.com
Just take the background-color css rule off body.
Also, every major browser has a devtools component nowadays - it is your best friend.
edit: I see that it's applied by bootstrap. You can override it by specifying body { background-color: none; }
By the way, I think it's bad practice to apply a background image to the html node. Instead, apply it to the body node.
I have two problems with my website : http://test2.tamarawobben.nl
Problem 1 : In IE9 the header is placed well but the text area is at the wrong place.
Problem 2 : An area around the header stays white but it supposes to be shown the background.
Anyone a tip how to solve these two anoying problems?
Roelof
Edit 1 : Sorry, the wrong url. I will change it now.
Concerning the first problem, it's is not very clear what it is that it's not ok.
I guess the search field is supposed stick to the top of the page. Right now it looks like the body has a margin-top or a padding.
Actually looking at the markup, there is a textnode right after the body which adds the space at the top:
Remove it and the "sort-of" margin will go away.
Concerning the white background, you are using a GIF that has a white background! It won't magically dissapear. You have several choices:
change the image format to PNG and set the white to transparent
have separate images for the different parts (the search and the top of main content zone)
set the white color to transparent in the GIF (really not a good solution)
I also noticed that your <meta>, <title>... tags should be in the HEAD and not in the BODY !
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.
Right now im using one large centered image in my body tag.
First image is basically what the front page is going to be like. Looks great.
Second image has some content and pushes down the footer and the whole page. But still looks fine.
This last image has a lot of content and pushes everything down, even past the height of the body background image.
So my idea is too split up the background at the change of colour you see in the first image, where the footer starts, and add that as a background for the Footer DIV.
But the issue is that that part of the background goes on past the browser in the first image. If I were to put the BG in my footer DIV it would have to be 500px in height, resulting in scrollbars.
Essentially I want to put the the lower part of the background in my Footer DIV and have it act like the BODY, in that it won't create scrollbars.
I think that was clearer than my previous explanation? It's hard to explain!
So in the first screenshot the background is one big image?
Yes, you need to split the background up.
Now lets assume these things:
1.) You've set the background color of the body to black (and that black bar that is showing is the body background and not a part of the image.)
2.) You have split the image up so the bottom half is the background image on the footer div.
You can eliminate the black bar by making sure there are no margins pushing the footer div away from browser window, and making sure any default margins created by the browser itself are reset. (i.e. body { margin: 0;}) However, the bar can still show up in other browsers (usually Safari). One solution would be to set the background of the <body> tag to the same as the footer tag. This only really works with repeatable images though.
I'd say your best bet would be to fade the bottom of the image to black like you've done at the edges.
You can use background: scroll; to make the content scroll over the background, but viewed at different resolutions you could still see the bottom of the image.