hi guys i'm new to html and css
i wanted to create 4 backgrounds one at top one at left one at bottom and one at right... but somehow the one at right doesn't show up and the other work fine
can you help me?
HTML:
<div class="header">
</div>
<div class="leftheader">
</div>
<div class="rightheader">
</div>
<div class="bottomheader">
</div>
CSS
body {
background-color: #efefef;
margin: 0px auto;
font-family: arial
}
.header{
background: #cccccc;
background-position: top;
background-repeat: no-repeat;
background-attachment: fixed;
border: 0px solid #000000;
width: auto;
height: 60px;
}
.leftheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
border: 0px solid #000000;
width: 100;
height: 590;
}
.rightheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 10px top 10px;
border: 1px solid #000000;
width: 100;
height: 590;
}
.bottomheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
border: 0px solid #000000;
width: auto;
height: 60px;
}
The key to getting this to work is using float: left and float: right on your .leftheader and .rightheader elements. Then you need to clear your floats by putting clear: both on the .bottomheader.
body {
background-color: #efefef;
margin: 0px auto;
font-family: arial
}
.header {
background: #cccccc;
background-position: top;
background-repeat: no-repeat;
background-attachment: fixed;
border: 0px solid #000000;
width: auto;
height: 60px;
}
.leftheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
border: 0px solid #000000;
width: 100px;
height: 590px;
float: left;
}
.rightheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right 10px top 10px;
border: 1px solid #000000;
width: 100px;
height: 590px;
float: right;
}
.bottomheader {
background: #cccccc;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
border: 0px solid #000000;
width: auto;
height: 60px;
clear: both;
}
<div class="header">header</div>
<div class="leftheader">leftheader</div>
<div class="rightheader">rightheader</div>
<div class="bottomheader">bottomheader</div>
Related
#Preface I am relatively new to HTML and CSS if this has been answered elsewhere I would appreciate direction to something that gives me a solution.
Below is the code I have, I want the .Divclass to appear infront of my backround element with it's red background.
* {
background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
}
.divclass {
height: 230px;
width: 300px;
margin: 0px;
padding: 0px;
color: red;
border: solid 1px rgb(253, 253, 253);
text-align: center;
font-size: x-large;
}
Check the below snippet. The div is in front of the background image with a red background.
Let me know if this is what your desired output is
section {
background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
padding: 10px;
}
.divclass {
height: 230px;
width: 300px;
margin: 0px;
padding: 0px;
background-color: red;
border: solid 1px rgb(253, 253, 253);
text-align: center;
font-size: x-large;
}
<section>
<div class="divclass">Hi</div>
</section>
*{
background-image: url('https://www.pixelstalk.net/wp-content/uploads/2016/05/Treugolnik-triangle-illuminati-Wallpapers-High-Resolution.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 1960px 1080px;
}
.divclass {
height: 230px;
width: 300px;
/*color: red; This only makes the text color red */
background: #f00;
border: solid 1px rgb(253, 253, 253);
display: flex;
align-items: center;
justify-content: center;
font-size: x-large;
}
<div class=divclass> Hi </div>
Note the display: flex that was added to center the text, rather than using text: center which won't center it vertically.
I want the about div to show up BELOW the
full screen home card
I'm having troubles getting it to show like it should.
my html code has both divs in the "right" order and when i look it up online, i couldn't find any solutions.
<body>
<div class="homeCard">
<div class="homeCardTitle">
<h1>Robin Riezebos</h1>
</div>
</div>
<div class="aboutCard">
<div class="aboutCardText">
<h2>About</h2>
</div>
</div>
</body>
my css is either missing something or I did something completely wrong but I can't seem to find out what it is so please help...
index.css
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
height: 100%;
width: 100%;
position: fixed;
float: left;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
position: fixed;
width: 100%;
height: 320px;
top: 50%;
margin-top: -160px;
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
background-color: #1F1F1F;
color: white;
height: 500px;
}
Please change your css like below, i think the problem was with position fixed, if you want to get your background image rendered fully please respective pixels of height.
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
width: 100%;
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
background-color: #1F1F1F;
color: white;
height: 500px;
}
I have found a solution by bugging around in my css.
Turns out in stead of position: fixed; I should have used background-attachment: fixed; and remove position all-together.
this is my own fixed code:
.homeCard {
background-image: url("images/helicopter-in-sky-2.jpg");
height: 100%;
width: 100%;
background-attachment: fixed;
float: left;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.homeCardTitle {
position: relative;
width: 100%;
height: 0px;
top: 50%;
margin-top: -90px;
color: white;
text-shadow: 0 0 10px black;
}
.aboutCard {
width: 100%;
background-color: #1F1F1F;
color: white;
height: 320px;
float: left;
text-align: center;
}
I want to create a background image that has two images, but I can’t complement the second image to the right.
I can’t manage to make it look like one whole picture, but in one place.
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.home-wrapper {
height: 100%;
width: 100%;
overflow: hidden;
}
.left-content {
background: url(../img/leftwing.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
float: left;
position: absolute;
border-right: 1px solid black;
left: 0;
}
.right-content {
background: url(../img/rightwing.png);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: right;
position: absolute;
border-right: 1px solid black;
right: 0;
}
<div class="home-wrapper">
<div class="left-content">
a
</div>
<div class="right-content">
a
</div>
</div>
The reason I didn’t make it a whole background is these two have a different function when you hover over them.
This is what I want it to look like:
This is what I have instead:
You can achieve the desired result by adding background position in your css. Try this code.
.left-content{
background: url(../img/leftwing.png);
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: left;
position: absolute;
border-right: 1px solid black;
left: 0;
}
.right-content{
background: url(../img/rightwing.png);
background-position: right center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 50%;
float: right;
position: absolute;
border-right: 1px solid black;
right: 0;
}
Add background-position to both .right-content and .left-content
.right-content {
background-position: left center;
width: 50%; /* << this was 100%, typo? */
}
.left-content {
background-position: right center;
}
Here I'm trying to add an image so it fits completely into a div#image-container. I'm using CSS styles:
background-repeat: no-repeat;
background-size: cover;
which helps to fit the width correctly into the div, but not the height. How do I fix this?.
I've added the snippet below:
#image-container {
width: 90%;
height: 350px;
border: 13px solid gold;
box-sizing: border-box;
margin-left: 5%;
margin-top: 18px;
box-shadow: 0px 0px 7px 3px #000;
/*position: relative;*/
background-image: url(https://i.stack.imgur.com/Aixcp.jpg);
background-repeat: no-repeat;
background-size: cover;
}
<div id="image-container">
</div>
background-size: 100% 100%; solved the problem
#image-container {
width: 90%;
height: 350px;
border: 13px solid gold;
box-sizing: border-box;
margin-left: 5%;
margin-top: 18px;
box-shadow: 0px 0px 7px 3px #000;
/*position: relative;*/
background-image: url(https://i.stack.imgur.com/Aixcp.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div id="image-container">
</div>
Note:
I've looked around at other threads, but I can't seem to get the answers there to work.
I've been trying to exclude "#menu" from the margin property in "body{}" so that it doesn't overlap the text.
My code:
body {
text-align: center;
background: black;
background: url("http://tuxlink.files.wordpress.com/2010/04/snow-leopard-server-wallpaper.jpg");
font-family: Helvetica;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
color: black;
background-attachment: fixed;
background-size: cover;
font-size: 20px;
margin: 15%;
}
#menu{
position: absolute;
color: white;
position: fixed;
background-attachment: fixed;
border: 5px;
background-color: grey;
background-size: contain;
border-style: ridge;
border-color: grey;
width: 150px;
text-align: left;
float: left;
}
Override the CSS from the body with the CSS for the menu:
#menu { border: none; border-width: 5px; }
Add anything else you might need in there.
If you are trying to make the margin on #menu be reset to the default value, you can add margin: none; to your CSS, so that it looks something like this:
body {
text-align: center;
background: black;
background: url("http://tuxlink.files.wordpress.com/2010/04/snow-leopard-server-wallpaper.jpg");
font-family: Helvetica;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
color: black;
background-attachment: fixed;
background-size: cover;
font-size: 20px;
margin: 15%;
}
#menu{
position: absolute;
color: white;
position: fixed;
background-attachment: fixed;
border: 5px;
background-color: grey;
background-size: contain;
border-style: ridge;
border-color: grey;
width: 150px;
text-align: left;
float: left;
margin: none;
}
That should do the trick!
probably it was what inside your #menu
#menu{
position:absolute; <-- this are interfering with your margins
color:white;
position:fixed; <-- this are interfering with your margins
float:left; <-- this are interfering with your margins
margin: none; <-- remove that and try set the margin here (eg: margin: 10px;)
}