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.
Related
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;
}
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;
}
Lets say i have a code:
#container {
position: fixed;
top: 50%;
left: 50%;
width: 0;
height: 0;
text-align: center;
font-size: 300px;
}
<div id = "container">
text
</div>
I need the text to be centered. I need the text to be centered, even if the text is bigger than the window. It is necessary, that the text is position fixed, because the whole text sometimes goes BELOW the screen. I don't want it generating any scrollbars. It is very necessary in my situation. I need the container to be as small as possible, because huge scrolling divs generating lag, and i am doing parallax, with about 40 of them.
How do you center that text?
You could try with flexbox (display: flex)
#container {
display: flex;
position: fixed;
font-size: 300px;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<div id="container">
text
</div>
If you use position:fixed, it should not generate scrollbars on html. No need to set size to 0, but transform translate can help:
possible example (out of your context, may be weird if you use transform3D around your page)
#container {
position: fixed;
top: 50%;
left: 50%;
font-size: 600px;/* even bigger for demo purpose*/
transform: translate(-50%, -50%);
}
/* show center */
html {
min-height: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
}
<div id="container">
text
</div>
I'm facing a problem where a background image is set inline in the HTML (because it's a dynamic image src that comes from the database) but I still want to add a semi-transparent gradient on top of the existing background image.
Is this at all possible without using JS?
div {
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)); /* I need this to be added **on top** of the existing background image */
}
<div style="background-image: url(//lorempixel.com/1920/1080/nature/)"></div>
No, you can't add another background-image via CSS if there is one being set via inline styles. But you can use a pseudo-element and place it on top of the div.
Note: As pointed out in comments by Mike, using a :before element is much better than using the :after element because the :after gets placed on top of everything else and would need a lot of z-index settings to the other elements to overcome it (which, could become tedious). In addition to this setting pointer-events:none on the pseudo-element would also help.
div {
position: relative;
width: 200px;
height: 200px;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
pointer-events: none;
}
div * {
position: relative;
}
a, p, span {
color: red;
}
<div style="background-image: url(//lorempixel.com/1920/1080/nature/)">
<a href='#'>Some link for hit test</a>
<p>Some paragraph to test the color being affected by gradient on top or not</p>
<span>Some span to test the color being affected by gradient on top or not</span>
</div>
Multiple background images can be added to a single element using CSS but like other properties, the declarations are not additive and hence both the image and the gradient should either be set via CSS (or) by the back-end.
Below is a sample snippet where both the gradient and the image are set inline. You could store entire value as a string in DB (or) append it while setting the inline style (using JS or back-end program).
div {
position: relative;
width: 200px;
height: 200px;
}
a, p, span {
color: red;
}
<div style="background-image: url(//lorempixel.com/1920/1080/nature/), linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2))">
<a href='#'>Some link for hit test</a>
<p>Some paragraph to test the color being affected by gradient on top or not</p>
<span>Some span to test the color being affected by gradient on top or not</span>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I need to reproduce the image below.
The image in the center is my background. In my first div I've got some text. Over this div I need maybe an other div that hides a part of the div with the text so I can see the background of my page. Is there anyway I can have this invisible square in the middle of my div in CSS ?
The reason I need this behaviour is because I'm using the parallax scrolling effect.
Only in webkit, you can use a mask:
#background, #overlay {
position: absolute;
width: 200px;
height: 400px;
}
#background {
background: url("yourimage");
}
#overlay {
top: 0px;
left: 0px;
-webkit-mask-position: 0px 0px;
-webkit-mask-size: 100% 100%;
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 66%),
linear-gradient(90deg, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1) 66%);
background-color: rgba(255, 255, 255, 0.8);
}
fiddle
I have set the background of the overlay with a little alpha to show that the background div is stiil there, just set it to white in real code.
position:absolute; left: something; top: something; z-index: 2;
I would suggest you use a transparent image for this. This will create a 'window' to expose your background. I will also enable your text to wrap around it as apposed to cover it.
Like this:
#text-container {
width: 500px;
height: 500px;
position: relative;
z-index: 0;
overflow: hidden;
}
#image-container {
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
background-color: #aaa;
z-index: 5;
}
And the HTML:
<div id="text-container">
<p>Background text here</p>
<div id="image-container">
<img src="picture.jpg" />
</div>
</div>
The reason for specifying the top and left at 50% is so that the image box will be 50% from the top and left of the parent div. This applies to the top and left edges of the image box though, so it ends up not being quite centered. Setting the margins to - 1/2 the width and hight offsets them so that the box is properly centered.
Here is a link to a working fiddle
I think the best you can do in pure CSS is to place an image on top of your text which exactly matches your background image. It would not be a true hole, just an illusion.