I'm having an issue with my background image stretching beyond the screen resolution, but it seems to only happen on mobile landscape mode. Here is my css code;
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("assets/brickBackground.png");
background-repeat: repeat-x;
}
<div id="my-thing"></div>
The idea is that there is an image that is transitioned by a gradient into a solid background color. It works well on desktop and mobile, but not for landscape mode. The gradient fills the screen, but the image stretches beyond that when a scroll-y is introduced. I figure this is because of the image height, but I'm not sure how to do that properly without affecting the gradient or stretching the image normally. Media query? I'm not too sure.
I'm somewhat new to css so I apologize and do appreciate any help. Thank you.
New snippet with an image from: https://stackoverflow.com/a/19209651/125981
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
background-repeat: repeat-x;
}
<div id="my-thing"></div>
Try background-size: cover; Just one thing though. You are using repeat-x so are you sure the image is larger than it should be or is it simply repeating horizontally?
Try
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%,
rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Related
I met some problem in designing HTML and CSS. the picture that i make it on one of the divide class and the width is not full. For an example the picture is not fully fix in there and there will have some white blank in the left and right side.
.background1 {
margin: 0;
padding: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background1.jpg);
height: 80vh;
max-width: 2250px;
background-size: cover;
background-position: center;
}
<div class="background1">
<h1>Description</h1>
<h2>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</div>
body tag has its own margin
you can do this:
body {
margin :0;
}
Suddenly background is not visible in my Chrome. I am able to set only background color but not background image. Why is this happening suddenly?
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/smile.jpg");
height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
margin: 0 auto;
}
Try to replace address of image in background-image as following manner -
("../images/smile.jpg")
m trying to combine a scrollable gradient with a background-image that is fixed to the bottom of the screen within the same element.
.wrapper {
background-image: url('../resources/City_side3.png'), linear-gradient(to bottom, rgba(255, 205, 164, 1) 0%, rgba(159, 78, 117, 1) 50%, rgba(0, 0, 49, 1) 100%); /* W3C */
background-repeat: repeat-x;
background-position: bottom;
background-attachment: fixed;
height:auto !important;
height:100%;
min-height:100%;
}
my issue here is that the background-attachment also fixes the gradient, is there any way to fix the image seperately?
Im doing the following in css:
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/back.jpg') no-repeat fixed center;
i want to stretch the image to 100% 100%, how should i do so?
Use background-size: 100% 100%;.
Alternatively:
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/back.jpg') no-repeat fixed center / 100% 100%;
try
background-size:100% 100% // or cover
From what I know, you cannot stretch an image in background with CSS.
To start, you can use more accurate CCS:
body {
background-image: url('../img/back.jpg');
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.75);
}
But the picture will not stretch with this.
An other possibility than CSS, is to use a cell of a table with a picture, in a div that is set to background:
<div class=background>
<table width=100%><TR><TR>
<img src="../img/back.jpg" width=100%></TR>
</TR></TR></table>
</div>
And in CSS, you have to create layers with different z-index:
div.background {
z-index: -1;
position: fixed;
left: 0px;
top: 0px;
float: top;}
div.notbackground {
z-index: 0;
position: absolute;
left: 0px;}
the rest of your page should be placed in the "notbackground" div to appear in higher layer, so the picture is really on background. z-index=0 is higher than z-index=-1 (you ca use any numbers). This way your picture will appear as a background.
It's possible that some advanced CSS do the trick but after a quick search on Google I still don't know.
I'm trying to create a banner which spans the page width. A centered container measuring 1130px within this region holds five blocks of color at 20% of the container. Behind this container should be two divs at 50% each - one containing the first color swatch and the other containing the last to create a seamless palette but maintain the same width.
The issue I'm having at the minute is that the .modal-container which holds the five colour blocks will not display on top of the two background blocks .modal-left and .modal-right. I've tried tinkering with the z-index values of all three classes to no avail. position: absolute isn't an option either as this knocks the margin: 0 auto alignment off. Any ideas?
JSFiddle
The effect I'm looking for
EDIT:
I just got really carried away and did a total overhaul on that code. I'M SORRY I COULDN'T HELP MYSELF LOL
New and improved ya dig.
Your HTML simply needed some re-arranging. The inner div placed above the other two fixed it right up.
CSS (updated):
.modal {
background-image: -webkit-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -moz-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -ms-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -o-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: linear-gradient(to left, #3e454c 50%, #ff7f66 50%);
background-size: cover;
background-attachment: fixed;
background-position: left top;
background-repeat: no-repeat;
height: 54px;
width: 100%;
max-width: 1130px;
}
.modal-inner {
position: relative;
max-width: 1130px;
}
.modal-block {
float: left;
width: 20%;
height: 27px;
}
.una {
background: #3e454c;
background: rgba(62, 69, 76, .5);
}
.dos {
background: #2185c5;
background: rgba(33, 133, 197, .5);
}
.tres {
background: #7ecefd;
background: rgba(126, 206, 253, .5);
}
.cuatro {
background: #fff6e5;
background: rgba(255, 246, 229, .5);
}
.cinco {
background: #ff7f66;
background: rgba(255, 127, 102, .5);
}
HTML (less is more :) ):
<div class="modal">
<div class="modal-inner">
<div class="modal-block una"></div>
<div class="modal-block dos"></div>
<div class="modal-block tres"></div>
<div class="modal-block cuatro"></div>
<div class="modal-block cinco"></div>
</div>
</div>
See demo here http://jsfiddle.net/Godinall/cq27S/3/
First, re-arrange your divs to put the 50/50 underneath
Second, and most importantly, add this to .modal-inner
I believe this is better solution than setting position/margins
display:block;