I've tried to put a background image of a tileable galaxy on my website, but all its showing up is just red. I've tried removing the background color but then it just shows white. I've looked around but I'm just not sure what I'm doing wrong. Here's my code:
<style>
body {background-color:#800000;background-
image:url("https://srv4.imgonline.com.ua/result_img/imgonline-com-ua-
TextureSeamless-6dnmvt65oVOZjthV.png");
background-repeat:repeat;background-position:center center;
background-attachment:scroll;}
</style>
Any advice?
An image you are looking is not available on this below URL
https://srv4.imgonline.com.ua/result_img/imgonline-com-ua-
TextureSeamless-6dnmvt65oVOZjthV.png
For example you can try something like this:
html{
background: url('https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
height:100%;
width:100%;
}
Your image link is broken.
Try using another link, for your syntax is correct in the CSS.
Here is an example image link: https://thumb1.shutterstock.com/thumb_large/1479467/543360034/stock-photo-close-up-of-milky-way-galaxy-with-stars-and-space-dust-in-the-universe-long-exposure-photograph-543360034.jpg
Related
I'd like to know if I can add background colors instead of background images because they sometimes don't show :). Usually, I would just use the background-image: URL(""); like usual, but again, sometimes they wont show.
Actually, it is not bad at all to determine a background colour when working with background images.
div {
background-image: url("https://via.placeholder.com/500/green");
background-color: black;
height:500px;
width: 500px;
}
<div>123</div>
You can add both the background-color and background-image on the same element for the color to serve as an alternative
You can change background with css especially, but here some example of code, I hope it will help you.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<p>You can use custom background color also with css</p>
</body>
</html>
You can use the background-color or just background property. There are 2 ways of doing it. Either you can use use css using the <style> tag, or you can just edit the css in the html element itself if you just want to add 1 line of css. Example - <div style="background: red;"></div>.
I am using LESS with bootstrap and trying to create a simple gradiant but if I use it on the body tag I get a broken gradiant like this image.
http://i.imgur.com/nIyOeQY.png
and if I use it with the html tag I get something like this image (it starts after the div and section tags)
http://i.imgur.com/OSe3Qt3.png
Here is the code:
.bg_gradient(#start-color: #color-grad-top, #end-color: #color-grad-bot) {
background-color:#start-color;
background: -webkit-linear-gradient(#start-color, #end-color);
background: -o-linear-gradient(#start-color, #end-color);
background: -moz-linear-gradient(#start-color, #end-color);
background: linear-gradient(#start-color, #end-color);
}
html {
height: 100%;
.bg_gradient(#color-grad-top, #color-grad-bot);
}
What am I doing wrong? Thanks for your help.
I think i might have found the solution, I added the gradient to the html tag and made the body tag's background-color rgba making it transparent. that way the gradient fills the background.
I am trying to change the body background image for a wordpress site but it is not working.
The HTML class is this:
<body class="home blog" style>
And my CSS is this:
body.home.blog{
background-image:url('http://distilleryimage10.s3.amazonaws.com/0d443332b7bc11e2a7d622000a9e298f_6.jpg');
background-position:right top;
}
Does anyone know what CSS to write?
Also this is a wordpress site so keep that in mind. I don't use wordpress or php very often.
Got it..
You are going to want to remove the following line for your 'blue.css' stylesheet:
body {
background: #232528;
}
The background-image is working.. the background color is just being placed over top of it.
I don't see in your css rule for body.home.blog, only background-image for body without classes. Check your css it's should work
You need to remove the following from your Blue.css file
body {
background: #232528;
}
Or add !important; to your background in the file style.css like so:
body {
font: 0.75em / 1.73em Arial,sans-serif;
color: #6f6f6f;
background: #211D19;
background: url('http://distilleryimage10.s3.amazonaws.com/0d443332b7bc11e2a7d622000a9e298f_6.jpg') !important;
background-position:right top;
}
I did this page in 1998 and now that screens are wider the background repeats itself horizontally:
How can I make the camo-colored bar appear once at the very left only and preferably make the grey extend to the full screen? Do I have to treat the image or can I code it?
I found the change not trivial, now I just use
<body bgcolor="#FFFFFF" background="back4.gif" text="#333366" link="#CC0000" alink="#999999" vlink="996666" marginheight=0 marginwidth=0>
And the background is a simple file.
Can you help me solve the problem?
set the background using css, like this :
<style type="text/css">
body {
background: url(path/to/back4.gif) no-repeat;
}
</style>
This will fix the background and as for your other styling, read a bit about css.
use background-repeat:no-repeat for stop repeating your background img ,
read from here link
edit:
this link is good informative , check it- link2
I would say do something like this
html, body{
height:100%;
}
html{
background: #777 url("http://i.imgur.com/t9EMKKM.jpg") top left repeat;
}
body{
background: transparent url("http://i.imgur.com/sWhAr9t.jpg") top left repeat-y;
}
http://jsfiddle.net/daCrosby/hqZfW/
<body bgcolor="#FFFFFF" style="background: url(http://web.comhem.se/nrz/back4.gif) no-repeat;"
text="#333366" link="#CC0000" alink="#999999" vlink="996666" marginheight=0 marginwidth=0>
this should solve it.
i'm new to css and html.
i had something like this and i don't get the background-image show up
...
<style type="text/css">
#header_contain{
width:935px;
height: 135px;
background-image: url('bg.gif') repeat-x;
background-color:#E42323;
}
</style>
</head>
<body>
<div id="header_contain">
<h4>haga</h4>
</div>
</body>
...
I checked the image location and it's alright. I put an image from google and it shows. Now it only shows the bg colour. How can i get the bg image show up?
Change your css to this:
#header_contain{
width:935px;
height: 135px;
background-image: url('bg.gif');
background-repeat: repeat-x;
background-color:#E42323;
}
In your browser right click on the element and choose inspect element .
In the open window find your element properties and find its background url.
If the url is not correct you will see a tooltip Failed to load the url.
firefox firebug
in the firefox browser, open the firebug plugin and change to console tab, reload the page.
You will see the http requests there. If the browser fail to open the Url, you will see an error at console.
background-image property value should contain image URL only while you have repeat-x too.
You should write
background-image: url('bg.gif');
background-repeat: repeat-x;
background-color:#E42323;
background-position: left top;
You need to undstand all this things like
"background image" is the tag in which you can add image.
"background-repeat" this is help you to repeat the image in x and y axis
"background-color" is help you in fill the color
"background-position" will help you in change the position of image in px , em etc.
so over code can be in this way as wel "background: url('bg.gif') #fff left top repeat-x ;"