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.
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 know there are similar questions but they don't exactly answer my problem. Am trying something really simple, turning a background image into a link, am following a tutorial and he did it easily so i tried it but it just didn't work, the image just doesn't show, i did all my checks from the tutorial but it just doesn't work for me.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="s017.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>
<body>
<h1>CSS</h1>
</body>
</html>
body{
font-family: open-sans, sans-serif;
}
#fb/*, #tw, #sc, #in, #ig, #wa*/{
height: 60px;
width: 60px;
display: block;
position: absolute;
}
#fb {
background-image: url('image03.png');
background-position: 0px 0px;
}
as for the result:
as you can see there is nothing in there other than the title
i taught it was the browser but i tried it with Mozilla and Chrome with same result.
If you are trying to use this as thumbnails, I recommend just using images instead of trying to set background images. When you are setting the background image, it isn't resizing the image, but showing a small 60x60px section of the image in the background. If the top left corner is white, that's what you are seeing. Instead of background image, try this:
<a href="https://www.facebook.com">
<img id="fb" src="http://blog.addthiscdn.com/wp-content/uploads/2015/11/logo-facebook.png">
</a>
Here's a working codepen showing what I believe you are looking for. If this isn't exactly it, or there's a reason specifically you must use background image, let me know and i'll update my answer to reflect.
At first please be sure that your link for CSS file is working , As you know you should put your Style codes in s017.css file that is in your html file folder.
Probably your image size is big and didnt fit in your 60*60 (a) tag block or your image have a white space in left top position that you intered.For the first you can use background-size in css for " #fb " :
background-size:contain;
and for the 2nd probability you should crop your image with paint or other image editors.Of course,you can set the position in center of image but this is not recommended.
I hope this work for you!
Have fun !!
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
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 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;