I want to put a background in my web im just staring with a tutorial my code is like this
<html xmlns="http:/www.w3.org/1999/xhtml">
<head>
<title>PARIS DROP OUT</title>
<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header1">
<h1>THE DROP OUTS</h1>
</div>
<div id="#container_div">
<img id="drop" src="img/SHOCK.jpg" />
<background-image: src="img/background" />
<p class="red">ESTA PAGINA ES DE LOS LOCOS</p>
<p> Nowadays it's easy to put together a web presence using social media and a personal landing page, but if you want to actually make your own web site you're going to need to learn HTML and CSS. Fortunately, we can help. </p>
</div>
</body>
MY CSS LOOKS LIKE THIS:
<code> #container_div {
width:1800px;
height: :1800px;
background:red;
I try putting an image it doesn't work either
I have the exact same code that its on the tutorial and I don't see a background no matter what I change
Your div should be <div id="container_div"> (note: without the #)
The CSS selector #container_div means "any element with the id="container_div"
Enjoy!
css code to change background color
Background-color:red;
css code to change background image
Background-image:url();
your css class:
#container_div {
width:1800px;
height:1800px;
Background-color:red;
}
Related
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
There's obviously something fundamental I don't understand about styling so please help me out.
Let's take the following simple HTML :
<!DOCTYPE html>
<html>
<div>
<div style="border: 1px solid black;">
Hi!
</div>
</div>
</html>
So I have a DIV inside of a DIV and you can see a nice border around it. All is well. Now, let's remove the inline style and put it inside a CSS file.
HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<div>
<div class="test">
Hi!
</div>
</div>
</html>
CSS :
.test {
border: 1px solid black;
}
No border appears now. I've tested this on both Chrome and Firefox so I don't think this is browser-specific behavior. There's certainly a good reason why there's no border in the second case but I can't seem to find it. Why is this and how do I fix it in my CSS?
Your CSS file mustn't be getting loaded somehow or you have an older version cached in your browser.
Your code works fine. Here it is working in a jsFiddle.
Try performing a hard refresh (generally CTRL+F5 on Windows, CMD+SHIFT+R on Mac) and ensuring your CSS file is located in the same directory as the HTML file you're trying to open.
Did you put the css file in a sub folder?
If so, you'll need to point to it:
<link rel="stylesheet" href="subfoldername/test.css" />
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 am working with a django setup HTML and I want the first part of my html page to be determine by the first CSS stylesheet. The rest I want to be controlled by a different one. Is this possible. I put an HTML CSS link (below) above the code I want it to control. It doesn't seem to work and it looks like it gets applied to all the HTML. Is there a way to specify the CSS link to just the code I want.
<link href="folder/to/css/style.css" rel="stylesheet" type="text/css" />
Why don't you use different classes for the elements below? Also make sure you understand CSS specifity
No, you can't do that. You could use an iframe that has its own CSS.
You could use a specific section class, and link to both css stylesheets, for example:
<!-- Represents a first CSS file. -->
<style>
.section1.customclass
{
background-color: red;
}
</style>
<!-- Represents a second CSS file. -->
<style>
.section2.customclass
{
background-color: blue;
}
</style>
<div class="section1">
<input type="text" class="customclass" />
</div>
<div class="section2">
<input type="text" class="customclass" />
</div>