I have this: <body background="CFIS Fantasy Pool Logo Small.png" bgcolor="333333">
I want to add a tag so that it repeats on y, so something like repeat-y. I have tried many things but it won't work, it just goes all over the screen. What would that whole thing look like if I was to add a repeat-y tag. And by the way I want it to repeat on the left side.
You could do it with an inline style on the body tag like so:
<body style="background: #333 url("CFIS Fantasy Pool Logo Small.png") repeat-y 0 0;
But I'd recommend adding it to your stylesheet like so:
<body>
body {
background: #333 url("CFIS Fantasy Pool Logo Small.png") repeat-y 0 0;
}
I'd also recommend not using spaces or capital letters in file names as that can cause problems. It's better to do something like this:
cfis_fantasy_pool_logo_small.png
This should work:
background-repeat:repeat-y;
And for the positioning, use:
background-position:left;
OR
background-position:left top;
OR
background-position:left bottom;
Related
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
I have one page and I have applied style.css to it and in that body has given by default one background Image which will set automatically by adding css file to that page.
But in that I want all formatting same but I want to change body background image.
So what I will have to do to override the css formatting ?
In style.css I have given :
body
{
background: url(images/bg.jpg) repeat-x #e4e9ec top;
}
But I want bg.png as it's background So I have used :
<body background="images/noise-bg.png">
Is there any way ?
Something like this should work:
<body style="background-image: url(images/noise-bg.png)">
In terms of specificity, the style attribute should be more specific than styles defined in a stylesheet.
You can read more about CSS specificity here: http://css-tricks.com/specifics-on-css-specificity/
Set the background-image property.
You can give a different id attribute to the body tag for pages in your site.
For example for the home page you can use:
<body id="home">
And for another page you can use:
<body id="other">
Obviously these id names are just examples, use the ones that make most sense for your site.
Then in the CSS you can target specific pages like:
body#home {
background: url(images/bg.jpg) repeat-x #e4e9ec top;
}
And for another page you could use:
body#other {
background: url(images/another-bg.jpg) repeat-x #e4e9ec top;
}
Hope that helps.
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;
}
So for example the picture below I'm having typing giving each class="container" it's separate background colour/picture.
<div id="p" class="container">
</div>
style sheet
p.container {
background-image: url(img/this_is_top.png) repeat;
}
CHANGING QUESTION for some reason I have having trouble in setting a background Image* for it.
Regarding your background image problem you currently have
background-image: url(img/this_is_top.png) repeat;
This is wrong. But you are thinking of the background shorthand CSS property which follows this syntax:
#p.container {background:#ffffff url('img/this_is_top.png') no-repeat center center;}
And if you are styling in your stylesheet and your folder hierarchy is the usual (/~/>/img etc) then it should be:
#p.container {
background-image: #ffffff url('../img/this_is_top.png') repeat center center;
}
Notice the double dots before the url to tell CSS to look up a level for the img folder
For starters, having multiple id's with the same name on the same page is not such a great idea. http://css-tricks.com/the-difference-between-id-and-class/
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.