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
Related
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>
im trying to make all the images in a slideshow be of same size, I've tried using
.slideshow-container img {
height: 100%;
width: 100%;
}
but doesn't work
I would first start out with adding this to your css
body,html{
height: 100%;
}
Then I would create a parent element to basically contain all of the images
<div class='container'> <!-- your images --> </div>
Then just set the width of that to say 500px by 500px
Finally, you should be able to use height & width at 100%
$(document).ready(function(){
$('.2').click(function(){
$('.img1').css("display","none");
$('.img2').css("display","block");
});
$('.3').click(function(){
$('.img2').css("display","none");
$('.img3').css("display","block");
});
});
// not a very good example of how to make a slideshow but its more to show how to make images the same size as opposed to having a working slideshow
body,html{
margin: 0;
height: 100%;
}
.container{
width: 80%;
height: 50%;
background-color: black;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
}
.img1{
background-image: url('https://images.pexels.com/photos/284951/pexels-photo-284951.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
.img2{
background-image: url('https://images.pexels.com/photos/397998/pexels-photo-397998.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
display: none;
}
.img3{
background-image: url('https://images.pexels.com/photos/376533/pexels-photo-376533.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
<button class="1">Img 1</button>
<button class="2">Img 2</button>
<button class="3">Img 3</button>
<!--
Photo by Timotej Nagy from Pexels https://www.pexels.com/photo/dark-gold-lamp-light-284951/
-->
If you want a full screen slider, it's going to be something more complicated than that. Try this:
.slideshow-container {
position:absolute;
height:100%;
width:100%;
}
.slideshow-container img {
max-width:100%;
width:100%;
position:fixed;
left:0;
}
I would also recommend to check examples. From here maybe:
Link
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 code below works just fine on desktops. But on mobiles the images doesn't centralize correctly
<style>
html, body
{
margin: 0px;
padding: 0px;
height: 4000px; /* just an example */
}
</style>
<div style="
background-image: url('img/bg1.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: contain;
width: 100%;
height: 100%;
z-index: 998;">
</div>
I want it fixed on the center of the screen.
It will work for you i guess.
<style>
html, body
{
margin: 0px;
padding: 0px;
height: 100% !important; /* #nicfo advice, for working on mobiles */
}
</style>
<div style="
background-image: url('http://www.w3schools.com/images/w3schools.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: 100% 100%;
background-size: contain;
width: 100%;
height: 100%;
z-index: 998;">
</div>
to stretch the image to fill the screen:
background-size: 100% 100%;
to fill screen without stretching the image:
background-size: cover;
source