In CSS, I want to make a background with 50% of a color and 50% of another color but this color need to be terminated by a wave like that:
Actually I have that:
But it doesn't take 50% of screen.
Here is my code:
body {
background-color: #3f2982;
}
#wavebg {
position: relative;
content: "";
bottom: 0;
background: url('https://i.imgur.com/IJelEnu.png');
background-size: contain;
background-repeat: no-repeat;
width: 50%;
height: 100%;
float: left;
}
<div id='wavebg'></div>
How I can change it for take 50% of the screen?
body {
background-color: #3f2982;
}
#dark-bg {
width: 45%;
height: 100vh;
background-color: #27184f;
float: left;
}
#wavebg {
position: relative;
content: "";
bottom: 0;
background: url(https://i.imgur.com/IJelEnu.png);
background-size: contain;
background-repeat: no-repeat;
width: 50%;
height: 100vh;
float: left;
}
<div id="bg-container">
<div id="dark-bg"></div>
<div id='wavebg'>
</div>
</div>
Since the width of your image is not sufficient to cover 50% of screen width, your background image looks as if its stuck in the left border of the browser.
The trick is to apply a div immediately left to the image with the same color as the image.
This will get you the desired result of wave in approximate center of the screen. You may need to adjust #dark-bg width with css #media queries for a better responsive layout.
I sincerely hope it helps. This is the result you can have:
body {
background-color: #3f2982;
}
body,html{
height: 100%;
width: 100%;
margin: 0;
}
#wavebg {
background: url('https://i.imgur.com/IJelEnu.png');
background-size: 70% 100%;
background-repeat: no-repeat;
width: 60%;
height: 200%;
}
<html><body><div id='wavebg'></div></body></html>
Related
Is it possible to use CSS to make the background of the top 5% of a page a solid color, and two different background images for the remaining 65% and 30%?
This is how I need it to look:
Edit 2: So there are numerous ways to accomplish this.
Pseudo elements: I think this is the best method, as it avoids extra elements in the markup and allows good control of scaling/cropping. Example below.
Multiple containers: Works just like pseudo elements, but with the added disadvantage of extra elements in the markup. The best support across older browsers, but these days, pseudo elements are quite well supported. Example below.
Multiple backgrounds: This may be suitable for solid colors or gradients, but for most images scaling and cropping will be problematic if using percentages for size. Example below.
1. Pseudo Elements
Just add ::before and ::after pseudo elements to the pagewrapper, supply background images, and position accordingly.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.pagewrap::before {
content: "";
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.pagewrap::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
</div>
2. Multiple Containers
Just replace the pseudo elements in above example with container divs in the html.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.mid65 {
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.btm30 {
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
<div class="mid65"></div>
<div class="btm30"></div>
</div>
3. Multiple Background Images
Use multiple background images:
background-image: url("image1.jpg"), url(image2.jpg);
then use the same comma separated syntax
for background-repeat: no-repeat, no-repeat; (same value need not repeat)
and background-size: 100% 30%, 100% 65%;,
etc..
The background position is the tricky part though, because it doesn't seem to work as one might expect (Temani Afif kindly provided a very informative link in the comments below ). But this seems to achieve the desired result of 5% 65% 30%:
background-position: bottom left, 0% 15%;
Edit: Replaced gradients with actual images so you can see how image stretching may be an issue with this method. More suitable for solid colors or gradients.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: fixed;
width: 100%;
height: 100%;
background-color: blue;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg"), url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: 100% 30%, 100% 65%;
background-position: bottom left, 0% 15%;
background-repeat: no-repeat;
}
<div class="pagewrap"></div>
I am sure I am missing something simple, but I can't seem to find it.
On michelleforboe.com, I am trying to get the background image to cover the whole space of a div. I am using calc to set the height of the div, but the div is resolving slightly higher that what it should be. Also, if you scroll down & back up, the black bar at the bottom of the image is even larger. There is a another div sitting on top of the image; I had thought maybe that was causing the extra space, but I don't think it is. Anyone see what I am missing?
.home-section-1 .wrap {
margin-left: 0;
}
.home .site-inner {
margin-top: 140px;
}
.home-section-1.widget-area {
background-size: 100% calc(100vw/2.9);
background-position: 50% 50%;
height: calc(100vw/2.9);
padding-top: 0;
padding-bottom: 0;
}
#text-7 {
height: calc(100vw/2.9);
}
#text-7 .widget-wrap {
height: 100%;
position: relative;
}
#text-7 .widget-wrap .textwidget {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#text-7 a.button {
font-size: 2vw;
padding: 1vw;
}
.home-section-1 .widget-wrap {
width: 50%;
}
try this css
.home-section-1.widget-area {
background-size: cover !important;
background-position: 50% 50%;
height: auto;
padding-top: 0;
padding-bottom: 0;
}
If u wanna full screen of image then remove height from css
.home-section-1.widget-area {
background-size: cover !important;
background-position: 50% 50%;
padding-top: 0;
padding-bottom: 0;
}
I currently have this code:
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
width: 100vw;
height: 100vh;
}
.bg {
margin: 0;
overflow: hidden;
position: fixed;
height: 100vh;
top: 0;
bottom: 0;
}
.bg figure {
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
width: 100vw;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
}
<div class="bg"><figure></figure></div>
The image is used as a sitewide background-image for a new platform and the reason for not just putting it into the body as a background-image is that I want to be able to use the CSS3 Filter (blur) on it + opacity, which for both I plan to animate in certain sections of the site.
However if I do this I have to use absolute positioning for all other content on the site which is kinda messy. Is there a better way to insert this image as a background without using absolute positioning?
I strongly prefer a CSS3-only solution.
Add the image using pseudo element, like this, and you can have other content floating on top.
If you get issues with the z-index: -1;, which keep the image to stay in the background, you can remove it and give immediate children of the body position: relative instead.
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
height: 100vh;
}
body::before {
content: '';
position: fixed;
height: 100%;
width: 100%;
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
z-index: -1;
}
div {
color: white;
font-size: 30px;
}
<div>Hey there....</div>
Lets assume I have a div with a Gradient applied as a background-property.
I now want to overlay a black PNG (of smaller size) and set the PNG to have a background-blend-mode of overlay. Unfortunately I have no idea on how to achieve this.
I know I can have a working background-blend-mode when I render the Gradient into the CSS of the Div with the PNG image like:
background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;
This however results in the Gradient being as small as the actual PNG, which is not a desired effect, like this:
What I want to achieve is this with pure CSS (if possible):
Here a Codepen to illustrate what I'm trying to do: http://codepen.io/anon/pen/zxOXGP
Notice the Black Icon. I wanna overlay this.
Try using mix-blend-mode instead of background-blend-mode and switch to simple text for the plus-sign or a webfont for more custom figures.
Example Codepen of the below:
.placeholder {
position: relative;
width: 400px;
height: 300px;
background-image: -moz-linear-gradient(#ff0000, #0000ff);
background-image: -webkit-linear-gradient(#ff0000, #0000ff);
background-image: linear-gradient(#ff0000, #0000ff);
}
.center {
position: absolute;
top: 25%;
width: 100%;
font-size: 120px;
}
.center span {
display: block;
text-align: center;
color: red;
mix-blend-mode: screen;
}
<div class="placeholder">
<div class="center"><span>+</span>
</div>
</div>
The gradient sandwich
Ingredients
The :before forms the bottom z-layer with z-index: 1, it is full opacity
The .content div forms the filling, central z-layer, with z-index: 2. It needs position: relative to take its z-index.
The :after forms the top z-layer with z-index: 3 and completes our lunch item. It is half opacity.
This is the tasty result:
Full Example
I have removed all but the standard CSS3 gradient for simplicity. View in a supporting browser.
.gradient {
position: relative;
height: 200px;
padding: 20px;
}
.gradient:before,
.gradient:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background-size: 100%;
background-image: linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
opacity: 0.5;
}
.gradient:before {
opacity: 1;
z-index: 1;
}
.gradient:after {
z-index: 3;
}
.overlayed_image {
position: relative;
width: 64px;
height: 64px;
display: block;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://cdn.flaticon.com/png/256/9029.png);
}
.content {
position: relative;
z-index: 2;
}
<div class="gradient">
<div class="content">
You can see me!
<div class="overlayed_image"></div>
</div>
</div>
I am very new to Front-end development and Foundation.
I am trying to get <div class="main-header"> to be a full screen image that scales down responsively.
Can anyone tell me what I am doing wrong? It is scaling properly, but is not showing the full image. I also wanted the <div class="large-6 large-offset-6 columns"> to sit above it on a mobile device – is that possible?
The HTML:
<!-- MAIN HEADER -->
<div class="main-header">
<div class="row">
<div class="large-6 large-offset-6 columns">
<h1 class="logo">BleepBleeps</h1>
<h3>A family of little friends<br>that make parenting easier</h3>
</div> <!-- END large-6 large-offset-6 columns -->
</div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->
The CSS:
.main-header {
background-image: url(../img/bb-background2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
h1.logo {
text-indent: -9999px;
height:115px;
margin-top: 10%;
}
http://css-tricks.com/perfect-full-page-background-image/
//HTML
<img src="images/bg.jpg" id="bg" alt="">
//CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
OR
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
OR
//HTML
<img src="images/bg.jpg" id="bg" alt="">
//CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
//jQuery
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
<style type="text/css">
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;
}
</style>
for Full-screen responsive background image
set css height ( height:100vh )
example :
.main-header {
background-image: url(../img/bb-background2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height:100vh; /* responsive height */
}
One hint about the "background-size: cover" solution, you have to put it after "background" definition, otherwise it won't work, for example this won't work:
html, body {
height: 100%;
background-size: cover;
background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed;
}
http://jsfiddle.net/8XUjP/58/
I personally dont recommend to apply style on HTML tag, it might have after effects somewhere later part of the development.
so i personally suggest to apply background-image property to the body tag.
body{
width:100%;
height: 100%;
background-image: url("./images/bg.jpg");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
This simple trick solved my problem. this works for most of the screens larger/smaller ones.
there are so many ways to do it, i found this the simpler with minimum after effects
I had this same problem with my pre-launch site EnGrip. I went live with this issue. But after a few trials finally this has worked for me:
background-size: cover;
background-repeat: no-repeat;
position: fixed;
background-attachment: scroll;
background-position: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 0;
pure CSS solution. I don't have any JS/JQuery fix over here. Even am new to this UI development. Just thought I would share a working solution since I read this thread yesterday.
Try this:
<img src="images/background.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">
http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.html
Backstretch
Check out this one-liner plugin that scales a background image responsively.
All you need to do is:
1. Include the library:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
2. Call the method:
$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
I used it for a simple "under construction website" site I had and it worked perfectly.
You can also make full screen banner section without use of JavaScript, pure css based responsive full screen banner section , using height: 100vh; in banner main div, here have live example for this
#bannersection {
position: relative;
display: table;
width: 100%;
background: rgba(99,214,250,1);
height: 100vh;
}
https://www.htmllion.com/fullscreen-header-banner-section.html
This worked for me, so posting this.
.my-container {
position: relative;
background: #696969;
overflow: hidden;
}
.my-container:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('https://images.pexels.com/photos/1084542/pexels-photo-1084542.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
I have done this javascript function: it fix your background image to your screen size in base at the most significative dimension (width od height) without change the image aspect ratio.
<script language="Javascript">
function FixBackgroundToScreen()
{
bgImg = new Image();
bgImg.src = document.body.background;
if ((bgImg.height / window.innerHeight) < (bgImg.width / window.innerWidth))
document.body.style.backgroundSize = "auto 100%";
else
document.body.style.backgroundSize = "100% auto";
};
</script>
This function is the only think you need. It must be called with the window.onresize event and from the body.onload event. The image must be background-repeat: no-repeat; background-attachment: fixed;
<script language="Javascript">
window.onresize=function(){FixBackgroundToScreen();};
</script>
<body onload="FixBackgroundToScreen();">
You can see the function in my site www.andreamarulla.it
Sorry for my english...
Andrea ;-)
Simple fullscreen and centered image
https://jsfiddle.net/maestro888/3a9Lrmho
jQuery(function($) {
function resizeImage() {
$('.img-fullscreen').each(function () {
var $imgWrp = $(this);
$('img', this).each(function () {
var imgW = $(this)[0].width,
imgH = $(this)[0].height;
$(this).removeClass();
$imgWrp.css({
width: $(window).width(),
height: $(window).height()
});
imgW / imgH < $(window).width() / $(window).height() ?
$(this).addClass('full-width') : $(this).addClass('full-height');
});
});
}
window.onload = function () {
resizeImage();
};
window.onresize = function () {
setTimeout(resizeImage, 300);
};
resizeImage();
});
/*
* Hide scrollbars
*/
#wrapper {
overflow: hidden;
}
/*
* Basic styles
*/
.img-fullscreen {
position: relative;
overflow: hidden;
}
.img-fullscreen img {
vertical-align: middle;
position: absolute;
display: table;
margin: auto;
height: auto;
width: auto;
bottom: -100%;
right: -100%;
left: -100%;
top: -100%;
}
.img-fullscreen .full-width {
width: 100%;
}
.img-fullscreen .full-height {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="img-fullscreen">
<img src="https://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg" alt=""/>
</div>
</div>
For the full-screen responsive background image cover
<div class="full-screen">
</div>
CSS
.full-screen{
background-image: url("img_girl.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I would say, in your layout file give a
<div id="background"></div>
and then in your css do
#background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: image-url('background.png') no-repeat;
background-size: cover;
}
And be sure to have the background image in your app/assets/images and also change the
background: image-url('background.png') no-repeat;
'background.png' to your own background pic.
By useing this code below :
.classname{
background-image: url(images/paper.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Hope it works. Thanks