I have the following image frame:
and now i have several images which all should have that frame as a background. If i for example have this image:
i want the result to be the following:
i want the background image frame always to have the same size (for example 300 * 400) and i want the picture for the frame to be centered inside the frame and i want the overhang to be cut off.
i set this css for the background:
.pola {
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("../img/frames/frame_01.png");
background-size: contain;
background-repeat: no-repeat;
}
but i have no idea how to go on from here. How can i do that?
Here you go, any image you put will fit inside parent frame.
.pola {
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("http://i.stack.imgur.com/Q4NJZ.png");
background-size: contain;
background-repeat: no-repeat;
width: 400px;
height: 486px;
position: relative;
}
.pola img {
width: 92%;
height: 85%;
position: absolute;
top: 10px;
left: 0;
right: 0;
margin: auto;
}
<div class="pola">
<img src="http://lorempixel.com/600/800/sports/Dummy-Text/" />
</div>
You can create a similar layout by using a border and box-shadow around the image.
.frame {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-image: url("http://placehold.it/500x300");
background-position: -100px center;
border-color: #e8e8e9;
border-image: none;
border-style: solid;
border-width: 20px 20px 100px;
box-shadow: 0 0 5px gray;
height: 320px;
width: 320px;
}
<div class="frame"></div>
.pola {
margin: 0 auto;
background: url("../img/frames/frame_01.png") no-repeat fixed top center;
}
That is short way to write the code you already have. If you want the frame over the other image you would just put the the image after the frame url() like this:
.pola {
margin: 0 auto;
background: url("../img/frames/frame_01.png"), url("../img/this image is behind the frame") no-repeat fixed top center;
}
Hope this helps.
Related
I am looking for the page look; when there is a (what looks like) frame in the centre and an image around that or a blank background. http://hopelessrecords.com/about-us/ this is a link to a site, the page and background idea is what I would like to achieve.
(I didn't know how to phrase this properly so forgive me if my terminology is off and there is something out there that I missed when searching).
Try it in css
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(./yourImage.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.yourPage {
max-width: 1230px;
margin: 0 auto;
background-color: #fff;
}
And this in html
<div class="yourPage">
Your content
</div>
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(http://lorempixel.com/400/200/);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.yourPage {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
}
<div class="yourPage">
Your content
</div>
Just add the below to your styles.css
body { padding: 5em 15em; /* adds a spacing of 5x the font size to the top and bottom, and 15x of that to the left and right sides of the page. */
Read for a complete guide on padding, or check MDN article on box-model
Is there any possible way to make a two-sided inner shadow by shadow-box in css like the image below?
You can use a background image to fill the div:
#custom{
min-width: 200px;
min-height:200px;
width : 100%;
background-image : url("http://i.stack.imgur.com/y6HMs.png");
background-repeat : no-repeat;
background-size: contain;
}
<div id="custom">
</div>
And make sure to give it background-size: contain; so the image can fit all the div.
EDIT:
This is a snippet using a border in the div, so you can see that the image is filling all the space.
#custom {
min-width: 200px;
min-height: 200px;
width: 100%;
background-image: url("http://i.stack.imgur.com/y6HMs.png");
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
}
<div id="custom">
</div>
You can use pseudo elements for both shadows:
div {
box-shadow: inset 0 0 2em -.5em gray;
line-height: 3em;
text-align: center;
position: relative;
overflow: hidden;
}
div:before,
div:after {
content: '';
display: inline-block;
width: 40%;
height: 100%;
position: absolute;
left: 5%;
top: -100%;
border-radius: 50%;
box-shadow: 0 0 2em #aaa;
}
div:after {
left: auto;
right: 5%;
}
div[contenteditable] {
margin-top: 3em;
display: inline-block;
outline: none;
}
<div>hello world</div>
<div contenteditable>TYPE HERE...and watch the shadows</div>
These shadows have a responsive behavior. Their size expands when the div width expands.
I have got a simple part of a website where i am using some CSS to get a square tile. The problem is the whole tile is never actually showing up, when i use it in HTML and put a lot of text in it, the width and height attribute dont seem to have any effect on the div. Here
`
.tileYellowDouble {
display: inline-block;
background-color: Black;
height: 200px;
width: 400px;
border: solid 1px black;
}
#imageTile {
float: right;
display: inline-block;
background: url(Thimo.png);
background-size: 100% 100%;
width: 400px;
height: 600px;
border-radius: 0px 10px 10px 0px;
}
body {
background: url(York.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.main {
position: fixed;
border: solid 1px black;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -500px;
width: 1000px;
height: 600px;
background: #35bc7a;
border-radius: 10px;
}
<div class="main">
<div id="imageTile"></div>
<div class="tileYellowDouble">Doesnt show the background color or border</div>
</div>
I just found out that when i comment out .main it does show the box, but when it is back in it just shows a clear background. Also using Z-index doesnt work
I have a div which has a background of a map. The map is centred and has a background size of 'contain'. The page is responsive so when the window resizes, so does the map. I need to be able to have a div on top of a certain country on the map, and on resize of the background map, the div stays directly on top of it.
So far I have
<div id="map-holder">
<div class="content">
<div class="placeholder"></div>
</div>
</div>
The div with the class of placeholder is the div i wish to keep on top of a certain country. The div with map-holder for ID is the div with the map background. Content is just to keep it all in place.
CSS
.content {
text-align: center;
width: 1200px;
margin: 0 auto;}
#map-holder {
position: relative;
height: 1000px;
width: 100%;
background: #F0F0F0;
background-image: url(../images/image-mapster.min.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.placeholder {
position: absolute;
right: 30px;
background: #fff;
width: 80px;
height: 50px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
padding: 0;
cursor: pointer;
}
.placeholder img {
width: 100%;
height: 100%;
padding: 0;
}
.placeholder:before {
position: absolute;
top: 30%;
left: 45%;
font-weight: bold;
content: '+';
}
The only solution I can think if actually putting an image over the map.
You can do this by having multiple CSS backgrounds. Just change your code for #map-holder to this:
#map-holder {
position: relative;
height: 500px;
width: 500px;
background: #F0F0F0;
background-image: url(this_image_goes_on_top.png), url(your_map.jpg);
background-size: contain, contain;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
padding: 30px;
}
I made a little JSFiddle out of your code for demonstration: https://jsfiddle.net/zamofL9g/1/
Basically, it's a little difficult, as I recall, when using background images.
Since the image is, technically speaking "content" you can use an inline image and suitable wrapping divs. The 'pins' can then be positioned using % based positioning values.
Here's a Codepen demo I made some time ago. This one has a tooltip too!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 90%;
margin: 10px auto;
position: relative;
}
.map img {
max-width: 100%;
}
.box {
width: 2%;
height: 5%;
background-image: url(http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 38%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: -25%;
left: 110%;
width: 300%;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
I am trying to move the login form, from its current position upwards. It needs to be closer to the logo, I know this is because of the min height set on the header but this needs to be fixed.
On the right is how the form appears. And on the left is how it should appear.
Please note the change should only affect the login form.
.header-strip {
background: url("../../Images/gradient.gif");
min-width: 981px;
position: relative;
z-index: 300;
min-height: 134px;
padding-top: 10px;
}
.login {
background: url("../../Images/Audi-R8-TDI.jpg");
background-size: 100%;
padding: 50px 0 50px 0;
background-repeat: no-repeat;
background-position: left;
height: 500px;
width: 1000px;
border-radius: 5px;
}
Thanks for your help.
EDIT:
change
.login {
background: url("../../Images/Audi-R8-TDI.jpg");
background-size: 100%;
padding: 50px 0 50px 0;
background-repeat: no-repeat;
background-position: left;
height: 500px;
width: 1000px;
border-radius: 5px;
}
to
.login {
background: url("../../Images/Audi-R8-TDI.jpg");
background-size: 100%;
padding: 50px 0 50px 0;
background-repeat: no-repeat;
background-position: left;
height: 500px;
width: 1000px;
border-radius: 5px;
margin: -20px 0 0 0;
position: relative;
top: 0;
z-index: 9999;
}
this will change the distance of the login to the header and sets the login on a higher z-index
see on jsfiddle here: http://jsfiddle.net/W9gcx/
Try adding margin-top for the login.
Reduce your padding top til you get it as you want. currently its 50.
.login {
padding: 20px 0 50px 0;
}
hope its helps.
You must set margin-top and padding-top to 0, but also you have to set the form tag to display inline
First of all use ID's instead of classes. I guess you'll never ever use two header strips or two login forms at the same time.
Easily set the "margin" to 0px. This will remove the distance you actually have.
#login {
margin: 0px;
background: url("../../Images/Audi-R8-TDI.jpg");
background-size: 100%;
padding: 50px 0 50px 0;
background-repeat: no-repeat;
background-position: left;
height: 500px;
width: 1000px;
border-radius: 5px;
}
Try to play with that margin in your browser using the built-in "inspector" pressing "F12".
margin-top 0px;
This will actually just affect the "top" distance.
Study this:
http://www.cssbasics.com/chapter_7_css_margins.html
EDIT:
Even your div's shouldn't be parent
<div id="header-strip">..</div>
<div id="login">..</div>
try to add top margin top .login class
.login {
clear:both;
margin-top:50px;
background: url("../../Images/Audi-R8-TDI.jpg");
background-size: 100%;
padding: 50px 0 50px 0;
background-repeat: no-repeat;
background-position: left;
height: 500px;
width: 1000px;
border-radius: 5px;
}