I want to avoid the repeat of a background image. It seems something is wrong in the code below because it does not work. It always repeats. I Want left top no repeat
Code
body {
background: url(../images/bg/bgheleneLogo.JPG)!important;
}
Use background-position Property & background-repeat Property
The code will work fine for you
body {
background-color: #000000;
background-image: url('../images/bg/bgheleneLogo.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position-x:top;
background-position-y:left; }
Related
I am making a website for a school project and I want to add a background image. the image is not appearing and I have checked with my teacher but she doesn't know what is wrong.
css:
.body {
background-image: url('img\smile.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100% 100%;
You might need to remove the dot before body and also add the closing bracket.
In CSS, we use dot only for referring to classes. body is a tag. Hence
remove the dot before the body tag and make sure to close the body with curly
braces.
And also you can use shorthand property to make the css more simple.
For example,
body {
background-image: url('img\smile.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100% 100%;
}
instead of this you can just make it as,
body {
background: url('img\smile.png') no-repeat fixed cover;
}
Reference Link -> https://www.w3schools.com/css/css_background_shorthand.asp
I am trying to use the graphic below and I would like to repeat from the right to continue on the boards. What would my best options be?
You can make this image the background of an css element and set property repeat-x.
background: url("paper.gif") repeat-x;
You can use background-position property, like this:
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-position: right 0;
background-repeat: repeat-x;
}
http://jsfiddle.net/72p5h6hs/2/
Repeating the background might look a little funny so as an alternative you can use background-size:cover to make the image stretch the whole width of the screen.
body {
background-image: url("http://i.stack.imgur.com/mIZCl.jpg");
background-size: cover;
}
I would like to have a picture as a background. I've written it in my CSS stylesheet as following:
body {
backgroung-image: url('link to my picture');
width: 600px;
}
When looking at this in the browser I see maybe a fifth of it since it is so big. Is my width property doing anything in the code above? How can I adjust the size of the picture so it fits the HTML element?
Use background-size: cover; to make the background-image cover the whole body element.
body{
background: url('http://placehold.it/350x150') no-repeat;
background-size:cover;
}
Note: I have used no-repeat because the default value for background-repeat: is repeat;.
If this syntax makes more sense to you then can use this one as well:
body{
background: url('http://placehold.it/350x150');
background-repeat:no-repeat;
background-size:cover;
}
DEMO http://jsfiddle.net/a_incarnati/puakv13x/
It seems like you have a spelling error (backgroung-image: url('link to my picture')) this should be changed to background-image: url('link to my picture').
The answer to your question
How can I adjust the size of the picture so it fits the HTML element?
Do this by adding a background-size:contain. You can also define how many pixels you want it to be; background-size: 150px 100px the numbers are (x, y).
It may also be required adding a background-repeat: no-repeat if image is not scaled.
Take a look at this site: http://www.w3schools.com/cssref/css3_pr_background-size.asp
in your style.css, or in your index.html;
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}
I currently have an image that is a specific height and width, how would I set a specific color to run endlessly under the image.
body {
background-image: location;
background-color: #fff;
}
I'd like to background-color to be below the background-image and not all over the page but just under it.
update
html has background-color: #red
body background-image: .png image & background-color: #fff;
I'd like the background-color to not overflow the html color which is the top and just overflow under the background-image from the body.
Use below code:
background:#ffffff url(ImageUrl) no-repeat;
Use this one line code
body{
background:#ffffff url('img_tree.png') no-repeat right top;
}
DEMO
Try this
background:red url(../img/s.jpg) no-repeat center top;
FIDDLE DEMO
or
background-color: red;/*...background colour..*/
background-image: url(../img/s.jpg);/*...image source...*/
background-position: center top;/*...position of background image...*/
background-repeat: no-repeat;/*...it will avoid repetition of image..*/
FIDDLE DEMO
I am using this CSS to put an image into the <body>:
body {
background: url('picture.png') no-repeat;
background-size: contain;
}
The image is displayed at the top of the browser window, but I need to place this image a few pixels from the top.
I've tried using padding/margin-top: 20px;, but it didn't help me, the image is still at the top of the browser window.
How can I move this background image for the body tag a few pixels down from the top?
Note: I need to have the picture in the body tag.
You need to use background-position instead.
body {
background: url('picture.png') no-repeat;
background-position: 0 20px;
background-size: contain;
}
You can use css background-position property,
example
body {
background: url('picture.png') no-repeat;
background-position: 0px 50px; /* This makes the image appear 50px from top */
background-size: contain;
}