I want to add a background image to a CSS class but it dosn't show up.
I've already tried to add height and width.
<div class="landing1">
<h2>The Lnad OF Programming</h2>
<p>get involved</p>
</div>
<style>
body,
html {
margin: 0;
size: 100%;
}
.landing1 {
margin: 3px;
text-align: center;
background-image: url(imgs/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 400px;
height: 500px;
}
</style>
the background image isn't show up.
It is working. You are giving the image path wrong
body , html{
margin:0;
size:100%;
}
.landing1{
margin:3px;
text-align:center;
background-image:url(http://placekitten.com/500/500);
background-repeat: no-repeat;
background-size: cover;
background-position:center;
width:400px;
height:500px;
}
<div class="landing1">
<h2>The Lnad OF Programming</h2>
<p>get involved</p>
</div>
Related
I've got this code (with no header-image visible) so far:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
background-image: url('https://placebear.com/940/248');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header"></div>
</div>
</div>
If you give the header-image a fixed size of 248px you can see it appear. Example with visible header-image:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
background-image: url('https://placebear.com/940/248');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 248px;
border: 3px solid white;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header"></div>
</div>
</div>
Is there a way to make it appear without using a fixed height?
Like when using a classic img-tag with just src- and alt-attribute. Then height is read out of the image-file self.
I would like to avoid fixed heights in there because if the image changes then it becomes all wrong.
I think you have to define a height if using background-image. Might be better to use img tag and just put a width of 100%, like so:
.wrap {
margin: 50px auto;
}
html,
body {
height: 100%;
}
body {
background-image: url('https://placebear.com/1000/800');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.header {
border: 3px solid white;
}
img {
width: 100%;
}
<div class="wrap">
<div class="row">
<div class="medium-12 columns header">
<img src="https://placebear.com/940/248" alt="Bear Image">
</div>
</div>
</div>
I'm trying to make my background from website so if I'll go to mobile it will stretch it by height in center.
Something from that: large screen to that small screen
my code is:
body{
background-image: url("Tie_logo_shaders.jpg");
background-color: black;
background-size: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Try this code
.bg-img{
background: url("https://s-media-cache-ak0.pinimg.com/originals/27/3e/43/273e43a71854d8359186ecc348370f8d.jpg") no-repeat center center;
min-height: 100%;
position: relative;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
<body>
<div class="bg-img">
</div>
</body>
The image I selected is too big and does not fit the page vertically or horizontally. here is what I have:
<style>
.jumbotron {
height: 500px;
width: 100%;
}
.jumbo-container {
background-image: url('../img/challenge2.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
</style>
<body>
<div class="jumbotron">
<div class="jumbo-container">
</div>
</div>
</body>
link to the picture I want: http://fc09.deviantart.net/fs71/f/2010/347/0/2/life_challenges_by_eddieretelj-d34scch.jpg
If I understand correctly you might need to use this take a look at my fiddle background-size: 100% auto; http://jsfiddle.net/mhussa19/r0pq2zra/2/
.jumbotron {
height: 500px;
width: 100%;
}
.jumbo-container {
background-image: url(' http://fc09.deviantart.net/fs71/f/2010/347/0/2/life_challenges_by_eddieretelj-d34scch.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
width: 100%;
height:100%;
}
background-image: url('../img/challenge2.jpg'); height:100%; width:100%;
should work
I am new to HTML/CSS.
I am building a simple webpage, but whenever I minimize the window, the background color minimizes with it. So when I scroll to the right, the background is blank.
HTML:
#body{
width:100%;
overflow:scroll;
/*overflow-x:scroll;*/
/*position:relative;*/
}
.container {
padding:20px 70px;
width:1000px;
position:absolute;
}
div.top {
background-color: #6495ed;
width:100%;
height:400px;
margin:0;
}
div.top_text {
padding:25px;
margin:35px;
float:left;
display:inline-block;
width:550px;
}
div.top_form {
border : 2px solid;
border-radius:20px;
padding:15px;
/*float:left;*/
display:inline-block;
width:auto;
background-color:#00edca;
}
<body id="body">
<div class="top" align="center">
<div class="container" align="center">
<div class="top_text">
<p id="intro">The Best <b>Pest Control Services</b></p>
</div>
<div class="top_form">
<!--some content-->
</div>
</div>
</div>
</body>
Thank you for your help!!
background-size: cover (or background-size: 100% 100%) can be used on body or another element to have the background image or color cover the whole element.
MDN example
and if you don't want the size of elements to change when you change the window size, don't use % sizes, but fixed units sizes.
HTML
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
margin: 0;
padding: 0;
}
.container {
padding: 20px 70px;
width: 1000px;
margin: 0 auto;
}
div.top {
background-color: #6495ed;
width: 1000px;
height: 400px;
margin: 0 auto;
}
div.top_text {
padding: 25px;
margin: 35px;
float :left;
display: inline-block;
width: 550px;
}
I have a container and i have two sections that i want to display one at a time. something like a scrolling webpage like This!
Basically how do i make the first div element (section) have its own background that fits to screen and the second section should have just a blank screen. Thank you very much ! please examples will be gladly appreciated :)
This is my css:
* {
box-sizing: border-box;
/* look this up */
}
body {
margin: 0;
}
/* style what the sections have in common */
.container {
width: 100%;
float: left;
top: 0px;
left: 0px;
text-align: center;
padding: 1em;
}
.about {
float:left;
height:auto;
width:100%;
background: url(10.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
/* target specific sections */
.heads {
background-color: red;
float:left;
height:auto;
width:100%;
}
This is my Html:
<body>
<section class="container about">
About
</section>
<section class="container heads">
About
</section>
</body>
.container{
width: 100%;
float: left;
text-align: center;
padding: 1em;
background-position: center;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
.about{
background: url(10.jpg);
}
.heads{
background-color: red;
}
You should set your body and HTML height to 100%:
body, html {
height: 100%;
margin: 0;
}
Then change your .about to:
.about {
float:left;
height:100%;
width:100%;
...}
NOTE: If this is what you were looking for please remember to mark it as correct.
add this in your .about class
background-size:100% 500px;