directory:
index.html
Images
(inside Images folder) Logo.png
CSS
.landing-page_logo{
display: block;
background-image: url("Images/Logo.png");
width: 300px;
height: 300px;
background-size: cover;
}
<section class="landing-page">
<div class="landing-page_logo">
</div>
<h3>Welcome</h3>
<h4>This is ......</h4>
<div>
Animated Text header
</div>
</section>
Image is in correct folder. Tried using <img> tag and that was working. But background-image tag is not working
If you have your images within folders then try this
background-image: url(/resources/Images/Logo.jpg);
don't forget to put backslash in front of the first folder.
Make sure you include the link to the css stylesheet.
Your html should look something like this:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="landing-page">
<div class="landing-page_logo"></div>
<h3>Welcome</h3>
<h4>This is ......</h4>
<div>
Animated Text header
</div>
</section>
</body>
</html>
Of course make sure to change 'style.css' to your css file name.
Related
My background-image won't show up. Do I need to tag the image in the HTML? Maybe position reference or something? Please help!
<html>
<head>
<link type="text/css" rel="stylesheet" href="sespe.css"/>
<title>Sespe Pizza Co.</title>
</head>
<body>
<div id="header1">
<h1>Sespe Pizza Co.</h1>
</div>
<div id="mb1"></div>
<div id="mb2"></div>
<div id="mb3"></div>
<div id="mainPage">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
</body>
</html>
CSS.....
body {
background-image: url('/Users/Username/Downloads/3634195609_f6b7edac1b_b.jpg');
}
Your path is the problem. You are navigating to your downloads folder. Place your image in a folder in your site folder, call it say 'images' and then call it into your css like this. If your new 'images' folder is on the same level as your css folder, the first option would work. ../because you are going up one folder to get to images.
body {
background-image: url('../images/3634195609_f6b7edac1b_b.jpg');
}
Edit: Seems in your case, your css file is not in a css folder, so you can just get to your images folder without going to a different level:
body {
background-image: url('images/3634195609_f6b7edac1b_b.jpg');
}
It seems that my external style sheet is not working for the body part. Here’s my code:
all.css:
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3 id="h3">
<a class="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div></a></br>
<a class="a" href="assign.php"><div class="div" style="left:210px"><center>Assign Employee</div></a></br>
<a class="a" href="accounts.php"><div class="div" style="left:400px"><center>Accounts</div></a>
</h3>
</div>
</body>
You have several flaws in your HTML code:
<style></style> - Empty style blocks, not really an issue
<center> tags don't seem to have a closing tag. This tag is deprecated, and you should consider using the CSS style text-align: center instead.
id="div" - Having multiple ID's with the same value is not recommended because it can have unexplained results. The purpose of these is make them unique.
</div> inside <a> tags - In HTML4, having block-level elements inside inline elements was not allowed. This has changed in HTML5, keep aware.
style="left:###px" - Having 'left' as a style property does nothing by itself. That element needs to have the associated position property set too, whether it's set to "relative", "absolute", "fixed", or even "static"
Fixing these issues are probably your top priority, because the structure of your page is messed up beyond repair that the browser doesn't render your (correct) CSS properly.
Also, make sure that your "texture1.jpg" is in the parent directory of all.css, which seems to be one directory above your home.php file. Try removing the "../", and you should be good if it's all in the same directory.
To be a little more elaborate, this is how your application sees your folder structure:
???
|--public_html <--- Root HTML directory
| |-- all.css <--- CSS File you provided
| |-- home.php <--- HTML file you provided
| |-- assign.php
| +-- accounts.php
+--picture1.jpg <--- Picture file? CSS/HTML file cannot access above public_html
If by your comment you say it's in the same as the HTML file, then inside all.css, change the line to just url('picture1.jpg').
As a rare favor, I'll see if I can fix everything from the information you've provided and all 3 files (CSS, HTML, JPG) are in the same directory. You don't seem to understand the concept of how classes and IDs work together.
home.php HTML (complete):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3>
<a class="active" href="home.php">Work Load</a><br />
Assign Employee<br />
Accounts
</h3>
</div>
</body>
</html>
all.css CSS (with added styles, some sample):
body {
background: url('texture1.jpg');
background-size: 600px 500px;
background-repeat: repeat;
}
#main {
background-color: lightpink;
}
.active {
color: green;
}
h3 {
text-align: center;
}
I've created a working JSFiddle with this info and I hope you can use it as a learning lesson to see how selectors work in CSS and how it correlates to your HTML structure.
just add
{}
before body, it worked for me
Change lke this
<head>
<style>
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
<!--html page-->
</style>
<link rel="stylesheet" type="text/css" href="all.css"><style>
</head>
<body>
<div id="main">
<h3 id="h3">
<a id="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div> </a></br>
<a id="a" href="assign.php"><div id="div" style="left:210px"><center>Assign Employee</div></a></br>
<a id="a" href="accounts.php"><div id="div" style="left:400px"><center>Accounts</div></a></h3>
</div>
</body>
I am new to programming and have a basic question. I have a background image on my web page, but I want the content area to have a white background. I see this very commonly on the web but being new I cannot seem to figure out how to do it. I have a #wrapper div that centers my content and a css rule to show the image, just can't get the content area background to be white. Help for this newbie is appreciated!
There are several ways to achieve this. You can either set the styles of your HTML tags (div, span, p etc...) by using the style attribute as in the example:
<div style="background-color: white;"></div>
or either define your styles inside the <head></head> tag as follows:
<html>
<head>
<style>
.your_class { background-color: #ffffff; }
</style>
</head>
<body>
<div class="your_class"></div>
</body>
</html>
or either use the link tag to put your CSS code inside a file and link to it as:
<head>
<link rel="stylesheet" type="text/css" href="your_file.css">
</head>
Or sometimes you will need to set your style dynamically. Then javascript enters into the picture:
<html>
<head>
<script>
function changeBg(id, color) {
document.getElementById(id).style.bgColor = color;
}
</script>
</head>
<body onload="changeBg('myDiv', 'white');">
<div id="myDiv"></div>
</body>
</html>
You should read more on HTML and CSS to understand how it works. There are plenty of tutorials on the web.
Assuming a structure like this :
<body>
<div id="wrapper">
<section id="content"> <!-- Or div or whatever -->
Lorem ipsum dolor sit amet
</section>
</div>
</body>
You should apply a background-color to #wrapper :
body{
background-image: url("your_url");
}
#wrapper{
background-color:white;
}
Check this fiddle for a working example.
Put your content inside a div and specify background:#fff; for that div in your CSS.
I am so befuddled. I am trying do something seemingly so simple but failing miserably. I'd like to have the image "b.png" change to "c.png." Can you find where I went wrong?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main">
<img src="b.png" />
</div>
</body>
</html>
style.css
.main:hover {
background-image: url('c.png');
}
Your <div class="main"> is getting c.png as its background – you just can't see it behind the <img src="b.png"> element.
Try removing that <img> tag, and using this for your CSS:
.main {
background-image: url(b.png);
}
.main:hover {
background-image: url(c.png);
}
You probably also need to give .main a height and width, since it no longer has anything inside it to give it a size.
Nothing wrong with what you are doing, except that the image(b.png) is of course on top of the background...So you can't see the background image.
I have created a small PSD Mockup of a about page for my website. However I have no idea how to code HTML and CSS.
I currently have the following code:
index.html
<html>
<link rel=StyleSheet href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id=body>
</div>
<div id=header>
<h3><font title=Futura>Header</font></h3>
</div>
</body>
css.css
body {
background-image: url("background.png");
background-position: 50% 50%;
background-repeat: no-repeat;
}
header {
background-image: url("otherBackground.png");
background-position: 50% 50%;
background-repeat: no-repeat;
}
I would like to have the background image of body to have the background image of header on top of it and then some text ontop of that.
How could I achieve this?
In this case, you'll want to utilize nesting and begin to understand general document flow. You are able and encouraged to place HTML elements inside of other HTML elements to establish a parent::child flow and control the position of the elements on your page. Notice how I moved the header element inside of the body div
<html>
<link rel="StyleSheet" href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id="body">
<div id="header">
<h3><font title="Futura">Header</font></h3>
</div>
</div>
</body>
You also need to make sure you surround your element attributes with quotation marks. In your css, if you are targeting a div, you need to specify that by prefixing a # to the element name.
Not a bad start, but keep reading tutorials - you'll get the hang of it!
You need to add the # before "header"
#header { }