I have a background.png that for some reason when I insert in body as background-image shows up about 30px too high, and 20px too far to the right.
I set:
html, body, * {
margin: 0;
padding: 0;
}
and that doesn't seem to affect it.
You can specify the position for your background using CSS:
body {
background: url(background.png) 20px 30px no-repeat;
}
This should re-position your background image to the location you want. The pixel values are the X and Y coordinates respectively.
You can see more on how to work with the background here:
http://www.w3schools.com/css/css_background.asp
Related
I'm attempting to create a background for a webpage that takes advantage of the gradient options in CSS3. What I want it to do is use a gradient that fills the full height of the screen, and then if the screen is scrolled beyond that, to just use the final color.
Unfortunately, all of my attempts end up with either the gradient repeating or staying fixed. Neither of these are acceptable for what I have in mind.
Could any of you help me? The closest I could get so far can be found below, but obviously it stays fixed. Everything else I've tried has pretty much had a repeating issue, even with no-repeat thrown into the mix.
html {
height: 100%
}
body {
background: gold no-repeat linear-gradient(silver, orange, gold);
background-attachment: fixed;
min-height: 100%;
margin: 0px;
}
You could make use of multiple backgrounds and stack them like in the below snippet where the first background is your linear-gradient and the second one is a solid color (which is same as the linear gradient's end color).
By not repeating the gradient (using the no-repeat), we can limit the gradient to be present only for the screen's height whereas the solid color background would by default run through the full size.
Here is what MDN says about multiple background stacking: link
These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
(emphasis is mine)
html {
height: 100%;
}
body {
background: linear-gradient(silver, orange, gold, red) no-repeat, gold;
margin: 0px;
}
/* Just for demo */
div {
min-height: 200vh;
}
<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
Some content....
</div>
Note: I have added a red end color to the linear-gradient just to show how the solid color takes over from the point where the gradient ends.
Actually, it would look like this:
html {
height: 100%;
}
body {
background: linear-gradient(red, orange, gold) no-repeat, gold;
background-size: 100%;
margin: 0px;
}
div {
min-height: 200vh;
}
Here is a fiddle https://jsfiddle.net/v14m59pq/163/
Hope this help you man.
If you want that effect, you need two layers, back layer with the final color and the top layer with the gradient.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
background-color: gold;
}
body {
height: 100%;
background: gold no-repeat linear-gradient(silver, orange, gold);
}
I use the html with a gold color and the body with the gradient, simply means, the parent the main color and the children the gradient with the full viewport height.
Check link to see the result :)
http://codepen.io/TibicenasDesign/pen/VLywpL
I have a background image on the html and the body tags as I have a repeating background on the html that I want to grow in height with the content. On top of this is the body background image - which is the main background image (that appears to dissolve into the html image, but it's just overlapping it).
This is working fine EXCEPT for when someone does a browser zoom. Oddly, the HTML background begins to creep over the body background on the right hand side.
html {
margin: 0; padding: 0; border: 0;
background: #000000 url("menu/images/redline2.jpg") repeat-y center;
}
body {
margin: 0; padding: 0; border: 0;
background: url("menu/images/about_bg2.jpg") no-repeat center;
}
Link to example of the issue: http://www.bitchofrome.com/about/about3.html
This is a common issue, and there's a simple solution for it. It often happens when you have a 100% width container with a background color or image. If you narrow down the browser window (or zoom) and then scroll right, the background has disappeared (as it doesn't get redrawn). The fix is to set a min-width on the outer container equal to (or greater than) the width of the inner elements.
In this case, what's needed is this:
html {min-width: 1100px;}
I'm curently workign on this page and I'm trying to make the background repeat-y from a certain height but to no avail. If you look at the link's background (bottom area); you'll see that it leaves a an ugly space there, which is ugly. The CSS is as show below
body {
font-family:Calibri;
font-size: 16px;
margin: 0px;
padding: 0px;
background-color: #000;
background-image: url(images/bg.png);
background-repeat: repeat -200px 0px;
}
There's no way I'm aware of that makes the repeat skip some pixels. If I were you I would split them so the background-image of the body would be what the majority of it is now without the top. And then I would add a div to the top with these settings:
<div id="upperpart"></div>
in css:
#upperpart{
background-image: url(whatever it is);
width:100%;
height:how high it is
background-repeat: repeat-x;
margin-bottom: minus its height; <-- this will make everything below this div get ontop the div
}
After some mathematical thinking and experiments, the line of code below did the magic. I had to also watch where to cut it off with -1530px. Make sure you use the same background you used with the body tag.
html {
background: url(images/bg.png) repeat 0px -1530px;
}
I have a background image, that is simply a wrapper for the main content of my page.
I have set this image a background image like:
#background {
background: url("../image/bg.png") repeat-y 133px 50px;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
I would have thought that this would position the image 133px from the left and 50px from the top, but it is flush against the top of the browser.
Can anyone shed any light on why this is doing this?
Thanks
Can this kind of position be done when the image has repeat-y?
Thanks
You are using repeat-y so the background is repeated vertically, both down and up. The value you specified - 50px - is the place where the original background starts, but if your background has a height of 50px, you will not notice the difference as it is repeated above it as well.
I have this simple problem. I'll try to explain with a sample code
An image in a td
<td style="text-align:right;"><a class="ratingstar" href="javascript:rate('1','27')" title="1"><img src="assets/images/star.png" alt="*" /></a></td>
Css for this image
.ratingstar:hover img, .ratingstar:focus img
{
margin-bottom: 3px;
}
So when i hover on image it moves up a bit to give this lifted feeling. Problem is that at the same time height of td increases and so elements below gets pushed down.
How can i keep td's size fixed while having my image lifted. I can increase height of td to solve this but as this is a mobile site I don't want to set specific height to size but have it expanded according to content inside.
I hope this is clear enough.
First solution (seen in CSS-tricks website): use relative positioning like
.ratingstar:hover img, .ratingstar:focus img {
position: relative;
bottom: 3px;
}
Second solution: play with padding-bottom going from 3 to 0px when margin-bottom goes from 0 to 3px, if your design permits it.
edit: It could also be border-top or bottom (same color as your background, if it isn't a gradient or image but a unique color)
You can do this with a negative top margin:
.ratingstar:hover img, .ratingstar:focus img
{
margin-top: -3px;
}
Or, if you do not need the actual image, you can do this really easily using background image and positioning.
.ratingstar
{
background-image: url(assets/images/star.png);
background-position: 0 0;
background-repeat: no-repeat;
}
.ratingstar:hover img, .ratingstar:focus img
{
background-position: 0 -3px;
}