I'm trying to post an image in the CSS but it's not working
I tried adding the file name but still nothing the file works in HTML but not CSS. I'm not sure if this is file problem or if it's because of the multiple imports
#header {}
#top .logo {}
#top.menu {}
#top .img .background-img {
background: url('desk-computer.jpg');
width: 100%;
height: 400px;
}
<section id="top">
<div class="logo">
<h1>92</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="background-img">
<img src=>
<h1>Welcome to my page</h1>
</div>
</section>
You have to put
.background-img{
background-image: url('desk-computer.jpg');
width: 100%;
height: 400px;
}
and remove <img src=> from html file
Related
This is the html
</head>
<body>
<header>
<h2>Mountain Travel</h2>
<nav>
<li>Tour</li>
<li>About</li>
<li>Contact</li>
</header>
<section class="introduction">
<div class="background-image" style="background-image: url(assets/image/main.jpg);" >
</div>
<div class="content-area">
<h1>Mountain Travel</h1>
<h3>Unmissable Adventure Tours Around The World</h3>
Contact Us Now
</div>
</section>
</body>
</html>
This is the CSS:
.introduction.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
.introduction{
position:relative;
}
However, the image doesn't show up at all. I am sure that the url is correct. Could anyone help me with it?
So first you don't have a valid html structure (your nav tag was not close). Secondly the .background-image is a child of .introduction. So to access it in css you will need to use .introduction .background-image and not .introduction.background-image:
.introduction .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
.introduction{
position:relative;
}
<header>
<h2>Mountain Travel</h2>
<nav>
<ul>
<li>Tour</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav> <!-- Don't forget to close your nav tag-->
</header>
<section class="introduction">
<div class="background-image" style="background-image: url(https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);" ></div>
<div class="content-area">
<h1>Mountain Travel</h1>
<h3>Unmissable Adventure Tours Around The World</h3>
Contact Us Now
</div>
</section>
I use in this example a reliable source (google logo) for your image path. So if in your example it's still not working maybe the source of the image is not the good one.
As mentionned by #KoshVery please don't forget that a li need to be in a ul or ol html tag.
I have applied an effect that I want only for a div parent but it applies also to the children.
This is my HTML code:
#wrapper {
height: 100%;
background-image: url("../asset/banner.jpg");
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: grayscale(100%);
}
#top-wrapper {
width: 100%;
height: 10%;
background-color: rgba(39, 35, 30, 0.5);
}
<div id="wrapper">
<header id="top-wrapper" class="inline-content">
<div id="logo" class="inline-content">
<img src="asset/logo.svg" alt="Logo">
<h1>portfolio</h1>
</div>
<nav>
<ul id="menu" class="inline-content">
<li>Home</li>
<li>About</li>
<li>Project</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="banner" class="inline-content">
<h2>Hello World!</h2>
<h2>and I am a Web Developer</h2>
<h3>based in London</h3>
</section>
</div>
The logo is a multi colour logo but it appears in greyscale.
Insert an additional div and just position it absolute:
<div id="wrapper">
<div id="test" style="
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url(banner.jpg);
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
filter: grayscale(100%);
z-index: -2;
"></div>
<header id="top-wrapper" class="inline-content">
<div id="logo" class="inline-content">
<img src="logo.svg" alt="Logo">
<h1>Tuffi portfolio</h1>
</div>
<nav>
<ul id="menu" class="inline-content">
<li>Home</li>
<li>About</li>
<li>Project</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section id="banner" class="inline-content">
<h2>Hello World!</h2>
<h1>I am Tuffi</h1>
<h2>and I am a Web Developer</h2>
<h3>based in London</h3>
</section>
</div>
Obviously, remove everything from #wrapper except the height of 100%.
I agree with all comments: save your background as greyscale. It will save you some KBytes and it will work in IE, too. Much more impressive than using a CSS rule that IE doesn't care about ;-)
Im trying to repeat-y an image, but everything I have tried does not work.
HTML Body Code:
<body>
<h1>Native Flowers</h1>
<div id="header"></div>
<div id="navBar">
<ul>
<li>Home</li>
<li>Other</li>
<li>Other</li>
<li>Other</li>
<li>Other</li>
</ul>
</div>
<img class="pinkTex" src="res/pinkTex.jpg"/>
</body>
This is the code for the body of my HTML file currently.
CSS pinkTex:
.pinkTex {
left: 0px;
height: 100%;
width: 200px;
}
At the moment this is the code for the pinkTex class for the img.
So if I can please get some help on how to repeat this y-axis, that would be great. Thanks You.
if you give image in body tag use this code and please make sure your image path is proper.
body
{
background-image: url("res/pinkTex.jpg");
background-repeat: repeat-y;
}
you can use also
.pinkTex
{
left: 0px;
height: 100%;
width: 200px;
background-image: url("res/pinkTex.jpg");
background-repeat: repeat-y;
}
I'm trying to make a very simple page, but I'm pulling my hair off trying to find a solution for the layout.
What I want to achieve is a simple header and below, some content ( I don't know the actual height of it, but won't probably cover the full height of the viewport) with a full background cover image that covers the remaining height.
I tried using 100vh on the container that's going to hold the content, but as you can see in the codepen: http://codepen.io/renttless/pen/vGvzRj , it creates a scrollbar apparently the size of the previous sibling, which will be the header.
Here's the code:
<body>
<div class="containerTest">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sectionTest">
<div class="backgroundTest">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</section>
</div>
CSS:
html,body{
height: 100%;
}
.sectionTest .backgroundTest{
background-color:red;
height:100vh;
}
If you add a background to your header and move the 100vh to the html element it will solve your problem
html{
background-color:red;
height:100vh;
}
header{
background: white;
}
body, header ul{
margin: 0;
}
<body>
<div class="containerTest">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sectionTest">
<div class="backgroundTest">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</section>
</div>
This is a pain to do. Maybe try using the flexbox approach. Here's an example.
<div class="box">
<div class="row header">
<header>
<nav>
<ul>
<li>Home</li>
<li>Who are we</li>
<li>Our work</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div class="row content">
<h1>I'm a full size h1</h1>
<p>I'm some paragraph</p>
</div>
</div>
CSS:
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
flex: 0 1 30px;
}
.box .row.header {
flex: 0 1 auto;
background-color: red;
}
.box .row.content {
flex: 1 1 auto;
background-color: green;
}
I don't get why still need to put class="container" under class="nav"? the class="nav" has already separate the whole element... why still need to put class="container"?
<div class="nav">
<div class="container">
<ul>
<li>Airbnb logo</li>
<li>Browse</li>
</ul>
<ul>
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
</div>
</div>
Why?
Because, in the absence of any other information, you might wish to restrict the width of the .container class but not that of the .nav class.
Perhaps you want the .nav to be 100% wide (which it would be by default) but the container to be 80% wide and centered.
That is just one reason...
Example Below:
* {
margin: 0;
padding: 0;
}
.nav {
background: lightblue
}
.container {
width: 80%;
margin: 0 auto;
background: green;
height: 150px;
}
<div class="nav">
<div class="container">
</div>
</div>