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 ;
Related
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>
Sorry if the title makes no sense, I didn't know how to call this issue, lol.
So... I have this android app which shows a parking lot, with the parking layout as the background and some cars showing "inside" each parking when needed. This is easy to build using different layouts for each parking and changing the image sources from empty to a car, etc.
The thing is... I need to replicate this on a web page, And I have no idea how could I build a background and change images on top of it. I suppose I could make a bunch of divs for each parking, changing the img sources when needed and use the parking lot layout as the background for the whole thing, however I don't know if this would be the best practice, and the whole idea doesn't really sound responsive to me.
Any ideas?
I don't expect/need it to change in real time like you can do with Android, but I do need to replicate the idea of changing images programatically on top of a background.
Thanks!
The only real way to overlay images with CSS is by having a relatively displayed container with it's inner image elements absolutely positioned.
Using this idea, it'd be possible to absolutely position the car images on top of your image parking spots.
That being said, why don't you create a more abstract representation of this parking lot?
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.available {
background-color: green;
}
.unavailable {
background-color: red;
}
<!DOCTYPE html>
<html>
<body>
<h1>Parking spot availability</h1>
<p>Green indicates an available spot. Red indicates an unavailable spot.</p>
<div class="flex-container">
<div class="available">1</div>
<div class="unavailable">2</div>
<div class="available">3</div>
</div>
</body>
</html>
For something like this, I would recommend using jQuery. Register event handlers for each of your images and adjust the src property accordingly. I have provided an example below for review:
$('.car').on('click', function () {
$(this).prop('src', 'https://placeholdit.co//i/300x150?text=A%20Completely%20New%20Image!&bg=111111');
});
.playground {
background-color: #ccc;
width: 500px;
height: 500px;
}
.car {
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playground">
<img src="https://placeholdit.co//i/200x150?text=The%20Original%20Image" class="car" />
</div>
At first, the problem seemed to be that only my CSS file, which was linked into my HTML document, wasn't loading in the browser when opened, but then when integrating an image into the HTML document I found it also wasn't appearing in the browser when the document was opened (and I used Microsoft Edge, Chrome, and Firefox to open the document. All files are located in the same folder on my computer, and yet using relative paths to locate the files also seem to be doing nothing. The code looks as such. (Worth noting that I was messing around with both the background-image property in CSS and the tag in HTML to load the same file since neither seemed to work)
HTML Code:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS Code (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
In the browser developer side bar, it says that there are no style properties for the webpage, which can't be true. I can always write the CSS into the HTML document, but the image is also an integral part of the end product and that won't load either. (Also maybe worth noting, with text-color for the p element and body used in CSS was merely for testing purposes)
Edit: this is the exact code for the test files I made that still don't work.
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
The image in the new folder for these test files was renamed as test.png.
Edit 2: I just found out that older files of mine that linked to external files still work, so the problem lies with the new files I make.
In your code you are trying to load the image twice, once as a background image for the div with class fieldimg, and once inside it in an ` tag:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) The background image needs to have be defined like background-image: url(field.png), not like you did it ("image(field.png)")
2.) The height setting for .fieldimg (30%) won't work, because there is no container around it that has a height setting to which the 30% could relate. So this becomes 0px high and therefore won't be visible. To avoid this you can apply height: 100% to the body
If you fix both, you'll have to erase either the background image or the image tag, otherwise you'll get your image twice...
Your CSS contains an error that might be the cause:
.fieldimg {
height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
width: 45%;
background-image: url('field.png'); /* this is how you place images by setting a background image */
background-size: cover;
}
Reference
Also, remember that when not using relative paths in your CSS it is relative to the location of the .css file! So if using an image as a background image in a specific CSS folder, be sure the image is relative to that CSS file location.
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.
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;
}