I am getting problems on using multiple images in the background of my web pages. I used the following codes for it:
body{
background-image: url(images/img1.png), url(images/img2.png); }
The code I used gives me two images on background but I want to keep one of the image exactly on the center. How can it do so using CSS?
Yeah, you can do it like this
body {
background-image: url(images/img1.png), url(images/img2.png);
background-repeat: no-repeat, repeat-x;
background-position: center, top left;
}
Check a demo here.
Related
i want to give location of background image inside css file but it is showing invalid
tried but not showing
css file
background: url{{('image/clock-background.jpeg')}}), center no-repeat;
background image should be loaded
you can directly used like that
background: url('image/clock-background.jpeg'), center no-repeat;
or if you want to asset() helper function then you used like that:
background: url("{{ asset('image/clock-background.jpeg') }}")
background: url{{('image/clock-background.jpeg')}}), center no-repeat;
is missing a ( after 'url'. Also get rid of the comma. Replace it with:
background: url({{('image/clock-background.jpeg')}}) center no-repeat;
background: url('/image/clock-background.jpeg');
Should work
So I'm working on a website and I want to add an image as the background and have it take up the entire web page so if there's scrolling the image is still available, but I'm lost at how I would do this.
Add the following CSS to your project:
body {
background-image: url("myImage.png");
background-attachment: fixed;
background-repeat: no-repeat;
}
I am having trouble understanding how to troubleshooting why my browsers(google chrome and safari) are ignoring the background image. I can see the url built correctly in the dev tools, however it is struck out (the important override still fails here too). Here is my code:
body {
background-image: image-url('blue.jpg') no-repeat center center fixed
}
the image is stored in app/assets/images.
As always, any help is greatly appreciated.
try removing image-url and just using url
body {
background-image: url('blue.jpg') no-repeat center center fixed
}
I ended up setting the image as a background instead of a background-image:
body {
background: asset_url('blue.jpg') no-repeat center center fixed;
color: ...
margin: ...
padding: ...
}
I do not understand why this works however.
I'm new to CSS and was hoping someone could help me understand what I'm doing wrong. I'm trying to get an image to show up but it seems that no matter what I do it refuses to display on my page. Can someone please explain to me what I'm doing wrong?
Image saved in: Users/NenaH77/assignment/images/sitebg.jpg.
Css file is saved under: Users/NenaH77/assignment/css/style.css
body{
background: url('../images/sitebg.jpg') no-repeat top top #31b8ea;
}
By having ../images I thought the image saved in the folder was suppose to go up 2 levels and into my css folder so I don't understand why my image isn't showing up :(
Your CSS background declaration is invalid:
top top should be top or top left or some other valid combination of positions.
Try :
body {
background: url('../images/sitebg.jpg') no-repeat 0 0 #31b8ea scroll;
}
You need should probably put the background color first.
body { background: #31b8ea url('../images/sitebg.jpg') no-repeat top }
Mr. Slayer gave you the right answer though.
To go up 2 levels do this
background: url('../../images/sitebg.jpg') no-repeat top top #31b8ea;
This will work. You can see the fiddle here.
body { background: url(../../img/image.jpg) no-repeat center center; background-size: cover;}
This will also take you up two levels...
I just ran into this same problem. What worked for me was putting the full path of the image from my pc, instead of from just inside the project folder.
So in this case use
body { background: url('C:/Users/NenaH77/assignment/images/sitebg.jpg')}
Instead of
body { background: url('../images/sitebg.jpg')}
I am setting a background image in the css as
body{
background-image: url('image.jpg');
background-repeat: repeat-x;
}
However, this does not increase the height of the background image as the page height increases. How can this be resolved?
Change repeat-x to repeat, so that it repeats both horizontally and vertically:
body{
background-image: url('image.jpg');
background-repeat: repeat;
}
Repeat-x only repeats horizontally, you want vertically, so either use simply "repeat" (will repeat vertically and horizontally) or
"repeat-y" (repeats vertically)
Also if you want to clean up your css and not have 30 different options to effect the background just use (I'm guessing you're using a WYSIWYG editor like Dreamweaver to do your css, I'd suggest and IDE, I use Aptana studio, but there's plenty of good options out there. It'll be easier to avoid a "bloated" style sheet if you avoid WYSIWYG editors)
body{
background: url('image.jpg') repeat-y center top;
}
You can throw a color value in there as well.