so I have a website at (http://zoid-studios.github.io/) but for some reason the background which should be centred bottom below the title isn't there?
Here's my css:
.top-section
height: 100vh
background-image: url(../images/background.svg)
background-size: 100%
background-position: center bottom
background-repeat: no-repeat
Any help? The background shows when viewed locally.
The filename seems to be Background.svg and not background.svg.
URIs in CSS are mostly case sensitive. Your actual image name is Background.svg (capital B), whereas in the CSS it's background.svg. That's the problem.
All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML. -W3C
Related
Are CSS shorthands like background property working with a value-gap? I tried it with background. I wanted to set some background values static and the backgorund image dynamicly.
I did the following:
background: no-repeat contain center;
The background-image should be added later dynamicly. Did i something wrong? The shorthand like i used isn't working. Do i have to use the single attributes (background-repeat, background-size, background-position ...) to realise that?
The problem isn't the missing background-image. The problem is with the background-size and background-position values. Unlike the rest of the longhands, values for those two have a very specific grammar: background-position followed by a / followed by background-size. See the spec.
This is what it should look like:
background: no-repeat center / contain;
You can always set a background-image separately.
Some other shorthands do have mandatory values. For example, font requires a font-size and a font-family. background does not have any mandatory values.
I got issue with background image on my webpage (won't show). I tried to place it in different <div>s but I cannot find solution, how to solve it. Also I tried to find solution here, but nothing worked for me. I don't have written long path to image, because all is in one folder. Also I know, I have it little chaotic.
I don't want to repair my wrongs, but just want to know how I can solve it and why it not work.
Here is my HTML source
And here is my CSS source
Place the URL within quotes, within the CSS file in the background property of the CSS file. url(limo.jpg) should instead be url("limo.jpg")
Depends what browser you're on. Try putting limo.jpg in quotation marks and adjusting to background-image:
body {
margin:0;
padding:0;
line-height: 1.5em;
background-image: url("limo.jpg") no-repeat center fixed;
background-size: cover;
}
So I have two sections in my HTML5, and I titled one section id = "section_2". In my CSS3, I tried to do:
#section_2{
background-image: url(image.jpg);
}
However, this did not work.
So when I went into my HTML5 and put right under the tag, it worked.
This is strange because when I do things like,
#aside{
background-image: url(image.jpg);
}
it works.
Sounds like you could have an issue with the relative location of the image.jpg. When called from with the page the url must be relative to the page. When called from within the CSS file, it must be relative to the CSS file, not necessarily the page.
e.g.
index.html
css/style.css
image.jpg
You may need for example:
background-image: url('../image.jpg');
You could also be experience an issue with the level of importance, depending on how many background-image attributes are being applied, in which case try using !important.
background-image: url(image.jpg) !important;
Be certain that the image.jpg is relative to the style.css location.
when i change path of imag.Browser doesnot show image
working code
body {
background-image: url("D:\main.jpg");
background-repeat: no-repeat;
background-position : center;
background-attachment : fixed ;
}
same code but changing path of image does not show image in browser .Not Working
body {
background-image: url("D:\Source_Code\HTML\Adventure Time\main.jpg");
background-repeat: no-repeat;
background-position : center;
background-attachment : fixed ;
}
You should give the url path from the current css file and not from the root of you computer. Also it's slash not backslash.
For example if your css file that contains this is in adventure-time directory do : background-image: url("./main.jpg");
Try giving virtual path instead of physical path.
e.g.
background-image: url("/HTML/Adventure Time/main.jpg");
The reason most urls are relative is because that absolute urls will work albeit they do depend on the operating system. Which is not desired for maintainability.
To explain a relative url (since your relative url seems to be working for you) i made this example. I wil use the following file structure.:
Your webpages are in ./myWebsite/Pages
your CSS is in ./myWebsite/CSS
the images are in ./myWebsite/Images
Then the url of the image would be as follows:
background-image: url("./Images/main.jpg");
Breakdown of the url:
The url is made up of different parts to be simple. The first part would be the "./". This is simply to say something like "parent directory".
So the parent directory of the file which this line of code is in(./myWebsite/CSS/stylesheet.css) would be "./myWebsite/".
Then the next part is "Images/". This means something like; "select folder 'Images' ".
So now we navigated to the parent directory and then selected the folder where the images are located. The only thing left to do is to select the image, which is done by specifying its name and extension; "main.jpg".
Keep in mind this is a basic explanation
Hi I have been stuck for a good amount of time with what I believe is a file path issue. I am creating a simple layout with a background image, the background image loaded as a http url but once I saved the file to my computer and altered the image I cannot get it to load. the file structure is as follows :
new project/css/images/index.html
the code:
header {
height: 450px;
background-image: url('../images/bg_blur.png'), center, center;
background-size: cover
}
I have run into the same issue with my logo image as well.
<div class="logo">
<img src="images/icon.svg">
</div>
As a novice, I have spent over a day trouble shooting this issue double and triple checking my paths, trying different methods. I have read multiple stack overflow answers and still cannot figure this out, I apologize for re-posting but I am at a loss.
Thanks,
Dave
If the file is in the exact same path then make sure that the filename of the images is exactly the same as well.
The background-image property enables you to provide an image for the
background,
it accepts only uri() / none values, you can't specified several values.
Instead try to use background shorthand property like this:
header {
background: url(../images/bg_blur.png) center center;
}
background shorthand property can accepts several values
<’background-color’> || <’background-image’> || <’backgroundrepeat’>
|| <’background-attachment’> || <’background-position’>
Initial value: n/a
the values should be separated by white spaces .
I agree with what Konrud said but also, you're missing a semicolon on the end of the final CSS rule you put, the background-size one.
background-size: cover should be background-size: cover;