I was trying to make uber's site.I want to add space between background image and div.
I tried using margin , padding and top 50% but none of them worked.I just want to add space from top
Html
<header id="main-image">
<div class="main-navigation">
</div>
</header>
Css
#main-image {
background: url(/images/earn_2x.webp);
width: 100vw;
height: 100vh;
z-index: -55;
}
.main-navigation {
width: 80%;
margin: auto;
height: 200px;
background: #fff;
}
Try background-position. This works only when background image is not set in repeat mode.
For eg:
background-position-y: 10px;
background-repeat: no-repeat;
This will add 10px space from top.
Related
I'm trying to get this cloud-like/gaussian blue effect, but I can't quite get it. I've tried using drop shadows with the same background color but it's not exactly right. Anyone know how to do it?
The given image doesn’t look so much like a CSS drop shadow as mentioned in the question, more like an image put in an element on top of which is a div with something like a linear gradient, or even multiples of these, semi transparent.
This sort of thing
background-image: linear-gradient(to bottom right, rgba(0,0,0,0.5),rgba(255,255,255,0.5));
But more sophisticated. Playing around with tones and opacities and positioning is probably the only way to get exactly what is wanted, the good thing about linear gradients being they let you do that.
I'm using a pseudo-element of the .splash container, makes it smaller than it's parent. On that pseudo-element, I have a partially transparent background and a box-shadow.
I do need to place all children of said container on top of the pseudo-class.
As you can see, the background begin to fade before the edge of the parent element that contains all text.
section {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: #121212
}
.splash {
--splash-background-color: rgba(255, 255, 255, 0.3);
--splash-background-size-decrement: 60px;
position: relative;
z-index: 2;
}
.splash > * {
position: relative;
z-index: 1;
}
.splash::before {
content: '';
position: absolute;
left: var(--splash-background-size-decrement);
right: var(--splash-background-size-decrement);
top: var(--splash-background-size-decrement);
bottom: var(--splash-background-size-decrement);
background-color: var(--splash-background-color);
box-shadow: 0px 0px 50px 60px var(--splash-background-color);
}
<section>
<div class="splash">
<h1>Some text here</h1>
<p>Some text here. Some text here</p>
<p>Some text here. Some text here</p>
</div>
<section>
You can achieve this using the SVG image. You can add SVG image in CSS file or you can add SVG code in HTML file. I am not able to attach SVG file here.
This is the final output.
<style>
body{
/*background-image: url("#"); Add background Image*/
background-repeat: no-repeat;
background-size: 100%;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 800px;
max-height: 800px;
}
.container{
width: 800px;
height: 800px;
/*background-image: url(".svg");*/
/*or .svg code in html file*/
background-repeat: no-repeat;
}
</style>
<body>
<div class="container"></div>
</body>
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
I have a fixed a button at the right of a bootstrap container.
But in high resolution, the button moves outside of the bootstrap container as it is fixed relative to body, not container.
Note: It must be fixed (not absolute) because I don't want it to scroll with window.
Here is the code:
<div class="body">
<h1>Body</h1>
<div class="container">
<h1>Container</h1>
Enquire Now
</div>
</div>
CSS:
.fixed-btn {
padding: 10px 20px;
background: #000;
color: #FFF !important;
text-decoration: none !important;
line-height: 30px;
position: fixed;
right: 70px;
top: 50px;
}
.body {
background: aquamarine;
min-height: 1000px;
}
.container {
background: antiquewhite;
min-height: 1000px;
max-width: 400px;
}
Is it possible to make it fixed within a bootstrap container? so it would not move outside of the container.
Look a live code at JSFIDDLE.
One possibility is to position the fixed element using calc
.fixed-btn {
position: fixed;
left: calc(50% + (400px/2)) ;
}
In this case the 400px (from your demo) would be the width of the container based on the various widths in Bootstrap.
You would have to adjust this in each media query.
JSfiddle Demo
I have a span with a background where I want the image resized without loosing the radio. I mean not stretching. My image disappear when I use height: auto;
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: auto;
}
You will need to set the height to an integer or percentage like so:
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: 250px;
}
Another way would be to place an <img> inside this div but have another div with the same properties but instead of have an img have the background-image. However this is considered messy and can slow down loading speeds as your loading 2 of the same image.
<div class="hiddendiv">
<img src="//file src">
<div class="visiblediv"></div>
</div>
<style>
.hiddendiv img{height:200px; width:500px;}
.visiblediv {height:200px; width:500px; margin-top:-200px; background-image:url(//path to your image);}
</style>
This is just a rough example but this has worked for me in the past, no matter how much im not a fan of this method.
If you want responsive image use <img/> tag instead css background-image. And then in css use width: 90%; height: auto;
I've asked this question before and got a solution but as I work my way into it, I found out that the solution wasn't the best (the suggestion was to set both into display:table-cell)
As I add in divs within, the height changes and the layout gets out of hand.
what I want is really simple, something like the image shown
[EDIT : this is the main reason why i'm having problem, i'm trying to add a div to include a shadow ]
I want the textured BG to stretch all the way, as tall as how the page would be (so as the content varies the textured bg would follow)
So I made something such as
<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>
by setting all the divs and body style to have height:100%; but the problem is that as my content stretches beyond the page limits (a scroll bar appears) the textured BG doesn't flow over, it just stop at where it was. Say the screen is of 800px tall, if the content goes beyond and reaches 1000px, the textured bg stops at 800px.
As I tried what was recommended for me by using display:table-cell, the textured bg flows with the content, but I can't add in my side bar because when I do, there will be a blank space above the content div. Any suggestion on how I should handle this problem?
EDIT: Using Xun Yang's approach would work. It's just, as he put it himself, unconventional ;)
The fiddle: http://jsfiddle.net/Nu2wH/
html, body {
height: 100%:
padding: 0;
margin: 0;
}
#page {
background: #444444;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}
#sidecolumn {
width: 45%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
float: left;
}
#sidebar {
background: #ddd;
}
#maincolumn {
padding: 5%;
width: 40%;
float: right;
background: #AA9933;
height: 100%:
}
#content {
background: #ddd;
}
You Can Use the css 3 declaration background-size, for all browsers
background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}
Not very conventional but works :)