Ok, so my website, http://ichion.tk, I have a banner, it repeats. What I'm asking is how to fix this. Here is my code for it:
<html>
<head>
<style>
div#title {
background-image: url("banner.png");
color:yellow;
height:120px;
width:100%;
}
</style>
</head>
<body>
<div id=title>
</div>
If it makes a difference, it's the same in both Google Chrome and Safari. I don't know about how it looks in other browsers.
I assume that you don't want the banner to be stretched at all, so I would avoid using background-size. Instead, define a background-color of black:
background-repeat: no-repeat;
background-color: black;
Here is a screenshot of the result:
Check this out:
div#title {
background: #00ff00 url("banner.gif") no-repeat fixed center;
}
Read more here: http://www.w3schools.com/cssref/css3_pr_background.asp
Try using:
background-repeat:no-repeat;
background-size:cover;
Related
I have been creating a webpage teaching about Mars, and I wanted to see if I could make the background of an HTML5 page an image instead of a boring white colour. I do want this with a link, so teaching with a .jpg will not be useful. Here is some code I have tried:
<!DOCTYPE HTML>
<html>
<head>
<title>My Webpage</title>
<style>
body {
background: url(https://phys.org/news/2020-05-astrobiologists-mars-rover-life-detecting-equipment.html);
}
</style>
</head>
<body>
My text here...
</body>
</html>
I am not the most experienced programmer, as you can see from this, but any help (even if it is just a little) will be much appreciated. Thank you for your time and have a great rest of your day.
--
isharief
use the link to the jpg file in the src attribute instead of the html link, for this case,
<style>
body {
background: url(https://scx1.b-cdn.net/csz/news/800/2020/astrobiologi.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
overflow: hidden
}
</style>
I've looked for the answer on everyone of questions that are similar to this question but nothing seems to work. Basically I created a test document to test the background image feature as it wasn't working on my main site.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" text="type/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
This is a test.
</body>
</html>
CSS:
body {
background-image: url(image.jpg) no-repeat;
}
Nothing shows apart from "This is a test." I have checked to see if the image is in the same place as the styles.css sheet, and it is. Can anyone help me please?
You can't combine background-repeat in background-image.
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
Use background background instead of background-image if you are using no-repeat etc.
body {
background: url(image.jpg) no-repeat;
}
According to W3 http://www.w3schools.com/cssref/pr_background-image.asp background-image property can be attached to the body tag.
The only reason you don't see it is no-repeat in the wrong place - it is the property of background itself, not a background image.
So here is the code you should use case you actually do not want to see image repeating:
body {
background-image: url("image.jpg");
background-repeat: no-repeat;
}
your image url is important to give it:
I hope solved with this.
1- in own folder: "./image.jpg"
2- in out folder: "../image.jpg"
3- or root relative path(eg asp.net): "~/pictures/image.jpg"
4- or relative path: "../pictures/image.jpg"
body
{
background-image: url(./image.jpg);
background-repeat: no-repeat;
}
I need repeat as background image gried.png image in welcome.blade.php in My app. I need create class selector file in css folder for this.
this is My welcome.css file in public/css folder
.background-image{
background-image:transparent url("/imgs/grid.png");
background-repeat:repeat;
}
This is my welcomeblade.php file
<link rel="stylesheet" href="/css/welcome.css" />
<div class="background-image"></div>
But this code did not generate any result, how can I fix this?
transparent is not a valid value for background-image. It's a value for background-color.
.background-image {
background-color: transparent;
background-image: url("/imgs/grid.png");
background-repeat: repeat;
}
should work.
See it here (with a different url for the image): https://jsfiddle.net/h0revzu5/
Just try background-attachment:repeat;
Example of background-repeat:
body {
background-image: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
background-repeat: repeat;
}
OR
Also by default it repeats when you set background,
body {
background: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
}
Default background-color is background-color:transparent;
This is the website:
http://loveloverun.com/test/love_run/
I checked and it works properly in chrome and firefox. The problem is that in IE9 the background image only works on the body level.
Here is my css:
body {
font-family : Open Sans;
min-height: 0px;
background: url("../img/front/bg.png") repeat;
height:auto;
}
And the other div e.g. container
.container {
width: 1022px !important; /*1302px*/
background-color:#ffffff;
background-clip:content-box;
}
and one more example (footer):
#enquiry {
color:#ffffff;
background: url("../img/front/black.png") repeat;
}
I checked the doc type and it's not missing any tag.
And also some other places are different from the chrome / firefox one, so I wonder:
1) Are there any plugin to enhance the compatibility? I tried modernizer, but it seems to have no effect.
2) How can background problem be solved for IE9?
Update:
body {
font-family : Open Sans;
min-height: 0px;
background-image: url("../img/front/bg.png");
background-repeat: repeat;
height:auto;
}
still the same result
Update 2:
Screen cap in ie9
Use
background-image: url(/image.whatever);
instead of the
background: url (); code
Let's say that this is my HTML.
<div id="spirit_tutorial_reward">
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size: contain;"></div>
<div id="spirit_tutorial_reward_header">45 Spirit</div>
<div id="spirit_tutorial_reward_text">Use Spirit to recruit new Rusherz in the Locker Room!</div>
</div>
And this is my styling:
#spirit_tutorial_reward
{
position:absolute;
top:77px;
left:371px;
width:45%;
}
#spirit_tutorial_reward_icon
{
background:url(../images/gift_icon_spirit.png) top no-repeat;
width:60px;
height:60px;
position:absolute;
top:0px;
left:0px;
float:left;
}
#spirit_tutorial_reward_header
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:0px;
float:left;
}
#spirit_tutorial_reward_text
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:22px;
float:left;
}
On no-zoom or normal mode , the images appear to have chopped off on Firefox (see attached image) but when I zoom my page , the image appears to becoming better (see attached image). I am facing this issue only in Firefox. Can anyone here help me out.
EDIT : FIDDLE demo for the problem
This worked for me in one of my recent encounters. This prevented the image from being cut off:
transform: rotate(0.0001deg);
Try setting background-size to 59px which i did in that fiddle and worked as expected.
i.e
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size:59px;"></div>
If this answer was helpful.Dont forget to mark to apport or mark as answer
Thanks
AB
I think it's a subpixel problem. That's the reason the image works fine in some zoom modes.
I edited your jsFiddle to set the background-size to 99.9%, and then works properly. You can see the example here.
Note: I put the !important to overwrite the inline styles... feeling lazy, you know ;)
If you want the background image to cover whole page.. apply the image to background and give background size:cover to it..
you may try this:
body {
background-image: url(your-image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #EEE;
background-size: cover;
}
you may refer this http://www.css3.info/preview/background-size/