I have Isolated the code to these div image swaps. The second image flickers, regardless of position. I can't figure it out? The images are basically the same it is for a menu image hover states. Is there something wrong with my code for IE8?
<div class="home"> </div>
<div class="image2"> </div>
Here is the CSS:
.home{
background-image: url('home.png');
background-repeat:no-repeat;
}
.home:hover {
background-image: url('home_hover.png');
background-repeat:no-repeat;
}
.image2{
background-image: url('image2.png');
background-repeat:no-repeat;
}
.image2:hover {
background-image: url('image2_hover.png');
background-repeat:no-repeat;
}
The first image does not flicker. The CSS is the same, I can reposition the DIV and get the same results. Why does the image flicker? It doesn't seem to matter if I put a height or width attribute to it either.
The flickering is due to the fact that you are using a different image for your hover effect. When your page initially loads, home.png and image2.png will be loaded and not your hover images. Your hover images of home_hover.png and image2_hover.png will only be loaded when you first hover the elements they are applied to. Which means, the moment you hover a request is made to the server for that background image. This takes a few short moments but is long enough to create the flicker.
I would suggest combining the default states and the hover states of each image into a single image. If you have an image that is 100px by 50px then your combined image would be 100px by 100px. Place the default state at the top of the image file and the hover at the bottom.
Your next step would then be to set dimensions on the element that has the rollover. The CSS would something like this:
.home {
background-image: url(home.png);
background-position: 0 0;
display: block;
width: 100px;
height: 50p;x
}
.home:hover {
background-position: 0 -50px;
}
What's happening here is that you are creating a window 100px by 50px in size. That dimension matches the top half of your image file which is the default state. The extra 50px of your image remain hidden.
Using background position allows us to shift the image relative to the element. We use -50px to shift the image up which reveals the lower half of the image which is your hover state.
NOTE: You also do not need to use for your DIVs.
How can I get the background of a Responsive website to adapt and move with the rest of the content on the Website?
My background is split doesn't cover the entire background, only partially to create an effect where each sides are of a different color (gray).
However, when I change the size of the screen, all of the elements will be moved and the background will not be positioned as it was initially.
How could I go about making sure that no matter what the size of the window is, the "gray bars" will always fit with main content?
If you look at this picture, this is how it should look like:
Also here is the script for the background image as well as the site wrapping:
.gray {background:url(http://frenchegg.com/images/gray.png) no-repeat; height:100%;}
.lgr {background-size:85% 100%; background-position:center;}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
background-color:#ebebeb;
}
You can find the website here.
Ok, you're page may need a little restructuring, but I believe I have a solution for you.
Initially, the main problem stems from background size being set to percentage widths (note background-size is a css3 property and not fully supported... but thats another issue).
For a proof of concept and for you to see what you're going to have to change, try to following:
Remove the background on 'gray' (line 1880 in styles.css)
Apply inline rules to 'row' (NOT TO THE ROW RULE) on line 230 in the source so it looks like the following:
<div class="main-content">
<div class="row" style="
padding: 65px;
background: url(http://frenchegg.com/images/gray.png) no-repeat;
background-size: 85% 100%; background-position: center;">
The rules are as follows for copying purposes.
padding: 65px;
background: url(http://frenchegg.com/images/gray.png) no-repeat;
background-size: 85% 100%;
background-position: center;
Note the padding is a bit screwy, but it's simply to show you where your background needs to be to respond correctly.
Cheers mate,
GW
I want to set a body background to 30.08% cream and 69.2% gray. I am doing this with a css gradient. Then I what to have all my articles to be `margin-left: 30.08%;' to meet the line of the background (so the background line, created by the gradient is like a ruler). Here is the code
body{
position: relative;
background: -webkit-linear-gradient(left, #faf4f2, #faf4f2 30.08%, #777777 30.08%, #777777);
}
article{
width: 300px;
height: 200px;
background: red;
margin-left:30.08%;
}
This works great, but as you can see in this jsFiddle example, the article does not always align with the gradients line. So depending on the browser width, it looks sloppy in some cases. In the jsFiddle example, you are going to see the problem I have if you resize the window to 652px (but that is not the only point) . Unfortunately this happeness at so many different points that I dont think a media query would do the job.
Is there a way to fix it?
Thanks
You have given your body width and height of 100%
When you give an element a width of 100% in CSS, you’re basically
saying “Make this element’s content area exactly equal to the explicit
width of its container — but only if its container has an explicit width.”
and then you are using
article{
margin-left:30.08%;
}
30.08% of what?
as said above you should use % only if its container (which in this case is a block level element <body>) has an explicit width.
You can read more about it here..
Read it here
and i have changed your code a bit changing the values from % to pixels
body{
background: -webkit-linear-gradient(left, #faf42, #faf42 90px, #777777 90px, #777777);
color: darker(#77777, 10%);
width:300px; height:300px;
}
it seems to be working now. the values are for demonstrational purpose only. change it according to your needs.
Hope it helps.
If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
Try placing quotes around the URL:
background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.
I think the answer is no, but can you position a background image with CSS, so that it is a fixed amount of pixels away from the right?
If I set background-position values of x and y, it seems those only give fixed pixel adjustments from the left and top respectively.
background-position: right 30px center;
It works in most browsers. See: http://caniuse.com/#feat=css-background-offsets for full list.
More information: http://www.w3.org/TR/css3-background/#the-background-position
It is possible to use attribute border as length from the right
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;
There is one way but it's not supported on every browser (see coverage here)
element {
background-position : calc(100% - 10px) 0;
}
It works in every modern browser, but it is possible that IE9 is crashing. Also no coverage for =< IE8.
As far as I know, the CSS specification does not provide for exactly what you're asking, outside of CSS expressions, of course. Working off the assumption that you don't want to use expressions or Javascript, I see three hackish solutions:
Make sure your background image matches the size of the container (at least in width) and set background-repeat: repeat or repeat-x if only the width is equalized. Then, having something appear x pixels from the right is as simple as background-position: -5px 0px.
Using percentages for background-position exhibits special behaviour that is better seen than described here. Give it a shot. Essentially, background-position: 90% 50% will make the right edge of the background image line up 10% away from the right edge of the container.
Create a div containing the image. Explicitly set the position of the containing element position: relative if not already set. Set the image container to position: absolute; right: 10px; top: 10px;, obviously adjusting the final two as you see fit. Place the image div container into the containing element.
Try this:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}
Note though that the code above will move the whole element (not the background image only) 5px from the right. This might be ok for your case.
You can do it in CSS3:
background-position: right 20px bottom 20px;
It works in Firefox, Chrome, IE9+
Source: MDN
Image workaround with transparent pixels on the right to serve as right margin.
The image workaround for the same is to create a PNG or GIF image (image file formats that support transparency) which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of (eg: 5px, 10px, etc.)
This works well consistently across fixed widths as well as widths in percentages.
Practically a good solution for accordion headers having a plus/minus or up/down arrow image on the header's right!
Downside: Unfortunately, you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color (with out a gradient/vignette), mostly white/black etc.
If you happen to stumble on this topic in these days of modern browsers you can use pseudo-class :after to do practicaly anything with the background.
.container:after{
content:"";
position:absolute;
right:20px;
background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}
this css will put background to bottom right corner of ".container" element with 20px space on the right side.
See this fiddle for example http://jsfiddle.net/h6K9z/226/
The most appropriate answer is the new four-value syntax for background-position, but until all browsers support it your best approach is a combination of earlier responses in the following order:
background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */
If you want to specify only the x-axis, you can do the following:
background-position-x: right 100px;
Just put the pixel padding into the image - add 10px or whatever to the canvas size of the image in photohop and align it right in CSS.
I was trying to do a similar task to get a dropdown arrow always on the right side of the table header and came up with this which seemed to work in Chrome and Firefox, but safari was telling me it was an invalid property.
background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;
After doing a bit of messing around in the inspector, I came up with this cross-browser solution that works in IE8+, Chrome, Firefox, and Safari, as well as responsive designs.
background: url(http://goo.gl/P93P5Q) no-repeat 95% center;
Here is a codepen of how it looks and works. Codepen is written with SCSS - http://cdpn.io/xqGbk
You can position your background image in an editor to be x pixels from the right side.
background: url(images_url) no-repeat right top;
The background image will be positioned in top right, but will appear to be x pixels from the right.
Works for all real browsers (and for IE9+):
background-position: right 10px top 10px;
I use it to RTL WordPress themes.
See example: temporary website or the real website will be up soon.
Look at the icons at the big DIVs right corners.
Another solution I haven't seen mentioned is to use pseudo elements and I do believe this solution will work with any CSS 2.1 compliant browser (≥ IE8,≥ Safari 2, ...) and it should also be responsive :
element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}
Example: The element eg. a square sized 100px (without considering borders) has a 10px padding and a background image should be shown inside the right padding. This means the pseudo-element is a 80px sized square. We want to stick it to the right border of the element with right:-10px;. If we'd like to have the background-image 5px away from the right border we need to stick the pseudo-element 5px away from the right border of the element with right:-5px;...
Test it for your self here : http://jsfiddle.net/yHucT/
If the container has a fixed height:
Tweek the percentages (background-position) until it fits correctly.
If the container has a dynamic height:
If you want a padding between your background and your container (such as when custom styling inputs, selects), add your padding to your image and set the background position to right or bottom.
I stumbled on this question while I was trying to get the background for a select box to fit say 5 px from the right of my select. In my case, my background is an arrow down that would replace the basic drop down icon. In my case, the padding will always remain the same (5-10 pixels from the right) for the background, so it's an easy modification to bring to the actual background image (making its dimensions 5-10 pixels wider on the right side.
Hope this helps!
Tweaking percentages from the left is a little brittle for my liking. When I need something like this I tend to add my container styling to a wrapper element and then apply the background on the inner element with background-position: right bottom
<style>
.wrapper {
background-color: #333;
border: solid 3px #222;
padding: 20px;
}
.bg-img {
background-image: url(path/to/img.png);
background-position: right bottom;
background-repeat: no-repeat;
}
.content-breakout {
margin: -20px
}
</style>
<div class="wrapper">
<div class="bg-img">
<div class="content-breakout"></div>
</div>
</div>
The .content-breakout class is optional and will allow your content to eat into the padding if required (negative margin values should match the corresponding values in the wrapper padding). It's a little verbose, but works reliably without having to be concerned about the relative positioning of the image compared to its width and height.
Its been loong since this question has been asked, but I just ran into this problem and I got it by doing :
background-position:95% 50%;
Solution for negative values. Adjust the padding-right to move the image.
<div style='overflow:hidden;'>
<div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>
</div>
</div>
Better for all
background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;
This works in Chrome 27, i don't know if it's valid or not or what other browswers do with it. I was surprised about this.
background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;