I've just got a quick question that if you have time would be great to have answered.
I'm working on a new site for a woman that is a fixed width site. She wants her background image to take up the entire span of the browser window and then the image that sits on top - she wants to be transparent so that the background can show through.
I've got the background image to take up the entire window but for some reason the transparent gif is not behaving as it usually does. The transparent image is the entire left half of the site.
Any ideas on this?
http://www.winteradagency.com/Arvin/test-bg.htm
Remove the CSS background color from both #container and #homeLeft.
Well, your CSS states
background-color: #D0D9A4;
for #homeLeft. Simply drop that.
Related
I'm trying to get a similar background effect that's on this website:
By looking at it, the background of the website is black, but has a horizontally stretched background image that remains at the top of the page. When the page is scrolled down, the image stays at the top but blends into the background color.
I tried making an image like the one in the example and used background-size:cover but when I scroll down, the image stays static and just the contents scroll. If that makes any sense at all!!
By looking at the example, could somebody kindly explain what CSS is needed to achieve this? And also, what should the image size be (in PS), to allow it to stretch in larger browsers without losing quality?
I tried looking at the website's CSS file to see what was happening, but it's all on one line and confusing to work out.
I would add a link to the site to show how it scrolls, but apparently I'm not allowed, so a screenshot will have to do.
Many thanks in advance.
It looks like that background uses the css:
background:#000000 url(<img>) no-repeat scroll center top;
Which sets a background colour AND image, places the image statically at the top, so that after scrolling down, the background colour is only visible.
To see this effect, using chrome, change the css to:
background:#00FF00 url(<img>) no-repeat scroll center top;
and you will see what is going on.
I have a small problem on a website with a background element in CSS that doesn't go below a certain point on page. This is the link where you can see what I'm talking about, in the footer: http://www.stuffforyourdog.com/collegeadvisors/admissions.html
On other pages everything is fine, but on this one I can't figure out why the background image doesn't go all the way down, like it's supposed to.
Your background image's height is too small, if you set
.tail-top2 {
background: url(images/bg2.png) bottom repeat-x;
}
instead of top aligned, you can see that the page is too large for your image. You need to set your background image height to greater than or equal to your largest page height.
I'm doing HTML and CSS for a site, and I've come across a very weird bug / behaviour that I can't pin down.
Take a look at http://www.atelierhsl.nl/antwerp/. There's a white line through the logo at the top. If I display:none the navigation at the bottom of the page, it disappears. But when I increase the bottom padding of the text column (.entry-content) it reappears again. This happens in Webkit, Mozilla and IE, so I know I must be doing something wrong. I just can't figure out what. Anybody?
This is caused by an anti-aliased line on the top your body's background images (just 1 pixel of light gray). The simple answer is to crop it using an image editor.
You may want to align the image to the top:
background: url("/wp-content/themes/transfer/images/bg.jpg") no-repeat scroll center top #1D1D88
The main problem is that the background image isn't as big as the the area it should cover.
Kobi's answer is correct, but if you don't mind a design suggestion: Rather than putting a black background image at no-repeat top for the body, separate body content into a container and a footer. For the content background use a smaller background image and tile it, or set the background color to black, since it appears you have no gradient. The footer div can then have a white background (inherited from the body, or just assigned directly).
You page is logically divided into main content and a footer, so the HTML should express that.
There is two solutions:
Just changed the body padding top from 60 to 40 or
changed the background position from center center to center top
I think, you should cut a 1px line from your background and to repeat-y it. There will be no bug, and you will decrease the image weight.
I'm having some problems traying to place 3 images into a background, I mean, I have one image on top, actually a is 2000x550 pixels, then I need to leave 200px (vertical) and place another image that cover also the all the center and them one image into the footer.
Do you think that is better to make a full image a place it? full it's about 30KB. Or there is any way to place it using css?
Kind Regards
You should be able to achieve this with css z-index. See the following links for more information:
W3C Schools explanation of z-indexes:
http://www.w3schools.com/Css/pr_pos_z-index.asp
Indepth explanation of z-index's from Smashing Magazine:
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
To answer the question of how to place the header image, the best way would be to define a div with a specified height (a 550px tall header seems awfully large to me, but hey, its your site) and width (probably set to 100%), and use the background-image css property to place the image there. This will prevent any side-scrolling.
A sample of the what you have going on to go with the sample images would be nice. From your description though it sounds like you have not implemented the z-index properly. My guess is that you need to declare the position of the divs you are adding a z-index to. Even if it is position:relative you still have to declare it or the z-index doesn't work.
-- Edit for real answer --
After looking at your images this is not actually that hard to implement. Here is how I would do it -
Set the background of BODY to white and the green/pink/gray background:
body{background:URL(images/green-pink-gray_bg.png) #fff no-repeat;}
Set the background of the DIV to the gray image -
div#gray{background:URL(images/gray_bg.png) #fff no-repeat;}
There is no need to set the z-index of anything since the div with the gray background is already "on top" of the BODY of the page. Using PNG images with transparent backgrounds will allow the white background to show through anywhere it is not covered by one of the background images.
I have a weird issue with a graphic with rounded corners.
I have a HTML page with the body set to transparent (style="filter:alpha(opacity=100);opacity:100;background-color:transparent;") and within this body is a div with a PNG image with rounded corners, with transparency on the edges so that it transitions correctly with the background.
This HTML page is contained within an iFrame on top of another HTML page, so I want the transparent image contained within the iFrame to show through and thus the rounded image to transition correctly with the background (which is an image) on the page that is calling the iFrame (hence the body within the iFrame has a transparent background).
This actually works fine, except for the transparency on the rounded corners. For some reason there's a very fine but noticeable jagged black edging around the rounded corner, as if a black matte was put on it.
I have also tried it with transparent GIFs, but got jagged white edgings instead.
Has anyone ever tried to do something like this before, and got it to work? If so, I'd love to hear how.
EDIT
Here's a link to the result: image
The image with the leaves is the background image (Flash) of the calling HTML. The search box is contained an an iFrame with a transparent background.
This happens on IE7. Firefox seems ok, oddly enough.
You have set Transparency on the body tag to 100... This means its not transparent, for it to be fully transparent you would have to set it to 0. But doing this will result in all elements contained in the body tag to be transparent as well.
I think something similar is happening, the search box is inheriting the opacity attribute which you set.
If you remove the opacity settings what happens?
Also check this website out, http://www.domedia.org/oveklykken/css-transparency.php