CSS background distorted upon hover - html

I came accross this problem while adding anchor elements to a section for a menu. I want each element to display a transparent block of color behind it when the mouse is hovering over. At the same time, I want the page background to have stripes from CSS (background: linear-gradient; or background:repeating-linear-gradient;) (I run into this problem with either). When I have a link on top of these vertical stripes and I hover over it, the underlying stripes are shifted in one direction by about a pixel. Its a very small effect but none-the-less frustrating. I have removed all other elements from the html and css that are not involved in this issue and placed the resulting files in this jsfiddle: http://jsfiddle.net/bw9fk0y4/5/
body {
margin: 0px;
padding: 0px;
background:
repeating-linear-gradient(90deg,transparent, transparent 2%, rgba(0,0,250,0.2) 2%, rgba(0,0,250,0.2) 4%, transparent 4%);
}
div nav{
position: relative;
left: 250px;
}
div nav a{
margin: 5px;
display: inline-block;
padding: 10px;
}
div nav a:hover{
background-color: rgba(250,250,250,0.4);
}
<body>
<div id = "container">
<nav>
link 1
</nav>
</div>
</body>
What I have found is that for some reason I don't run into this effect when the anchor is further to the right of this page. If it is centered or closer to the left side or even centered I do have this effect, even if I position it by setting a fixed width and the in CSS (margin: 0 auto;). If anyone knows of a way to aleviate this problem I would be very happy. This is only happening in chrome. I've tried using the browser specific gradients, no difference. I am afraid that this is just a result of CSS gradients not behaving well, because they seem to misbehave quite easily when played around with, but they are too convenient for me to give up on them easily.

Related

Setting the body background relative to entire page instead of viewport

I've been dealing with a problem for a day now, and I seem not to be able to solve it. I've got four images I want to use as CSS background on the <body> tag. They are supposed to be aligned as the corners of the page.
According to multiple resources I should set the min-height on both the html and body element to 100% if I want the placement my CSS background to be relative to the entire content of my page (which extends beneath the viewport) and not just to the viewport. However, this is not working. The bottom two corner images seem to be stuck to the bottom of the viewport.
I'm using this for CSS:
html {
min-height: 100%;
height: auto;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
background: url(../images/bgTopLeft.png) no-repeat left top,
url(../images/bgTopRight.png) no-repeat right top,
url(../images/bgBottomLeft.png) no-repeat left bottom,
url(../images/bgBottomRight.png) no-repeat right bottom;
}
My HTML shouldn't matter much here as I'm using the <body> tag, can't do much wrong there. The doctype is HTML5 in case anyone wants to know.
I've tried changing the setting of background-attachment to fixed, I tried the various settings of background-origin even though it doesn't seem to have to do anything with my current problem. I tried breaking up the multiple shorthand background into all the separate statements that are in there. I can't get it to work.
I'd rather not resort to sticking the bottom two corner images into a footer or a div at the bottom of my page that's just there for styling purposes. What I want, which is a <body> tag with four backgrounds positioned in the four corners of the entire page, should be possible, I just can't figure out what's going on here.
I've made a pen of what I think you're trying to achieve here:
Codepen example
I've used background-size to size the background images.
You may need to tweak this to match the size of your background images:
eg:
background-size: 40px 40px, 40px 40px, 40px 50px, 60px 60px;
depending on what size your images are.

How can I make a white rectangle extend all the way down, on top of another background?

I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/

PNG image's transparency overlaps a CSS background property

The PNG image is the sidebar, and the black part is the CSS background, the PNG's alpha seems to override the black box.
When I change the image's opacity, you can see the box continues through the entire image, but is still overridden and I double-checked the sidebar's transparency, but it's set up properly.
It does this on Google Chrome as well as Firefox.
Relevant CSS:
.sidebar{
background: url('side1.png') lightgray 10% 50%;
background-repeat: no-repeat;
background-size: 100%;
height: 600px;
width: 173px;
z-index:1;
float:left;
position:relative;
opacity:0.5;
}
.header{
background: black;
background-position: top right;
float:right;
width:100%;
height: 200px;
z-index:0;
position:absolute;
}
Relevant HTML:
<div class="sidebar">
<img src="images/pic1.png" class="icon">
</div>
<div class="header"></div>
This appears to be just a simple case of the division going back behind the floated content. Most people don't realize that just because there is floated content there, the division still expands back behind it all the way to the edge, like it normally would if the floated content wasn't there.
That division is taking up its maximum amount of available space like it is expected too. The floated content is only pushing the content, which at this point, there isn't any. Making your sidebar partially opaque, this issue becomes visible as you can see that box behind your image now. A quick fix, per say, would be to add a margin to the division to push it out from behind the sidebar, like so:
.header {
margin-left: 173px; /* The width of your sidebar */
}
Note, however, that you would have to apply this margin to the left side of all your block-level elements that need pushed out from under. So it would make sense to put all the right content into a single box that gets pushed out, to prevent confusion.
Edit: The reason your black background doesn't pull through on the sidebar image is that you're setting it's background to light grey here:
background: url('side1.png') lightgray 10% 50%;
This will put a light grey background behind the image rather than letting the transparent part of your image go through to whatever is behind it. Try removing it:
background: url('side1.png') 10% 50%;
See the jsFiddle example.

Messed up absolute positioned image on my page

On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}

Placing an background image with padding in h2 tag

I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).