I'm setting up a basic html site. I want to use an image for my background for the landing page. I'm trying to use css inline (I thought this would be easiest...go figure).
In my body tag, I've got the color I want, "darkkhaki". But the property for the background image is not coming up. I have uploaded to my flickr account the image I want, but no go. I did notice in my ST3 window that the closing parenthesis is highlighted red, but I can't find out why.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: darkkhaki;
background-image: https://www.flickr.com/photos/132197683#N04/33747163168/in/dateposted-public("praetorian_punisher.png");
}
h1 {
color: red;
text-align: center;
}
I would like to see the .png file as the background. It's not coming up, though.
Thx for any help.
First, you should do it like this:
body {
background-image: url(...);
}
Second, the url you're trying to use points to HTML page, not to the image itself. Correct url would be https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg.
body {
background-color: darkkhaki;
background-image: url(https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg);
}
h1 {
color: red;
text-align: center;
}
<h1>Hello!</h1>
Related
HELP
I dont know really what to do, I did review everything on the W3 schools website about CSS and HTML but nothing works.
File paths are correct but the background of that div class = "mainBanner" is not functioning.
<html>
<head>
<style>
* {
background-color: black;
margin: 0;
padding: 0;
}
.mainBanner {
background-image: url(/images/background.jpg);
color: #ffffff;
text-align: center;
height: 700px;
}
</style>
</head>
<div class="container mainBanner">
<h1>Welcome to The Travellers Website</h1>
<h4>You're all in one solution for perfect travels. Make memories and take step across
islands you've never seen before.</h4>
</div>
</html>
<!--Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct-->
Presuming the image is in the correct location, you are likely receiving issues as you haven't set a height/width of the image itself. You can do this by using background-size
* {
background-color: black;
margin: 0;
padding: 0;
}
.mainBanner {
background-image: url(https://i.imgur.com/7a4DOBA.jpg);
background-size:100% 100%;
color: #ffffff;
text-align: center;
height: 700px;
}
<html>
<div class="container mainBanner">
<h1>Welcome to The Travellers Website</h1>
<h4>You're all in one solution for perfect travels. Make memories and take step across
islands you've never seen before.</h4>
</div>
</html>
<!--Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct-->
Is the background image covered by the * selector when the bg color is applied? This imgae from the .mainBanner class doesnt load even the file is correct
As .mainBanner is more specific than *, css specified under the .mainBanner will take precedence.
background: url(/images/background.jpg) center no-repeat ;
How do I write the right adress, the code is:
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
}
How do I put a image from my resource file? I tried background-image: url("pic1.jpg") -that's the right address- and it doesn't work.
What I do is I put the images from a slideshow in css and put a simple cod afterwards in html to display it.
You have to pass a width and a height in order to make it appear. Try it like this:
.slide1 {
background: url('http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg') no-repeat center;
width: 200px;
height: 200px;
}
Edit:
If the image is in the same directory where your css file is, simply use:
background: url('nameOftheFile.jpg') no-repeat center;
Also this thread may be interesting for you: How to go up a level in the src path of a URL in HTML?
I cannot get this background image to appear. It is supposed to appear in the background with the header overlapping it. I'm using an id selector. I literally copied this straight from the book i have for my class and it's not working at all.
Here is my code. I'm very new to css
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fall Nature Hikes</title>
<style>
#content { background-image: url(fall.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 640px;
height: 480px;
padding-top: 20px; }
h1 { background-color: #FFFFFF;
opacity: 0.6;
font-size: 4em;
padding: 10 px; }
</style>
</head>
<body>
<div id="content">
<h1>Fall Nature Hikes</h1>
</div>
</body>
</html>
In my browser it works right for another image, you can check the url(fall.jpg) path is right？
I checked, your code can show the image, you can see this sample:
> https://jsfiddle.net/a9qm1j2t/
It's just copy all your html and css source code.
I think you should check image path and image type again, and make sure it's right.
May be your image path is not proper.
First check where is your css file and image file.You can verify your image path by inspecting your code on browser and in style check your image path.
New to HTML5 & CSS.
Using Sublime Text 3
currently following a video to create a one page portfolio.
video link provided: https://www.youtube.com/watch?v=UMupINi7fWQ
In the video Abdul Khan is putting CSS background color code in the style.css panel/folder.
Example:
*{
margin: 0;
}
body {}
#container {}
header {
background: #ADD8E6;
width: 100vw;
height: 100vh;
}
#one{
}
But when I try and put this code in my style.css, it does not work.
The background color only works when I am in the index.html and place the "bgcolor" within the body.
body bgcolor="#ADD8E6"
I was hoping someone could explain to me why I can't get it to work in style.css, but can in index.html
Thanks!
Can you write your code in head section of index.html
Like this:
<head>
<style>
header {
background: #ADD8E6;
width: 100vw;
height: 100vh;
}
</style>
</head>
if it work then let me know.
And then you just have to check the linking of CSS file on your index.html page.
Because you have not link your CSS properly.
Try this snippet in your style.css to set the background color of the body tag:
body {
background-color: ##AABBCC;
}
W3Schools - background-color
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;
}