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
Related
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
Currently I'm using this code:
<style type="text/css">
.icondiv{
border:1px solid;
content: url(image.png) 100% 100%;
}
</style>
<div class="icondiv"></div>
The output is like, the image stays in 1/4 of the div. How can I make the image fill the whole? I already checked the image and it has no extra whitespace.
If you don't want to use background image
.container{
width: 400px;
height: 100px;
}
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
<div class="container">
<img src="http://i62.tinypic.com/2dh8y1g.jpg" alt="" />
</div>
But pay attention to the support: http://caniuse.com/#search=object-fit
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.icondiv {
width: 400px;
height: 100px;
border: 1px solid #f00;
position: relative;
}
.icondiv img {
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
}
<div class="icondiv">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL19OsbasMqU64_o3uoov5liyKmD8KMStU1OR8hXUtV4pwALr7Sg" alt="" />
</div>
You should use
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
.container {
width: 700px;
height: 400px;
background: #444;
margin: 0 auto;
border: solid black 1px;
}
.container img{
width: 100%;
height: 100%;
}
Fiddle Here
Try this:
.icondiv{
border:1px solid;
background: url(yourimage.png) no-repeat center center;
background-size: cover;
width: 200px; // Adjust your needs
height: 200px; // Adjust your needs
}
You could create some css class like this:
full {
background-image: url(image_path('yourimage.jpg'));
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
It looks like you're trying to add the image into the div using CSS rather than inline in the HTML... I will assume you've got a good reason for this and follow suit. Instead of using "content:" you can drop the image in as a background and make it spread to fill the container.
.container {
width: 700px;
height: 400px;
background:#f00 url(http://i48.tinypic.com/wrltuc.jpg) no-repeat center center;
background-size:cover;
margin: 0 auto;
border: solid black 1px;
}
<div class="container">
</div>
The benefit of using this "background-size:cover" technique is that your image will always fill the containing div regardless of its proportions.
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 have this vertically formed image that should reach to the bottom of the page. So basically its height should be 100% all the time. Then this same image should also be put at the center of the page, which is pretty simple to do, but what I'm struggling with is making a menu in the middle of the image (inside it).
What are the best ways to achieve that effect? I cannot provide any code try because I don't even know how to start. Help would be highly appreciated.
This is to demonstrate the problem:
Demo
html
<div class="menuOnImage">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
css
.menuOnImage {
background: url('http://www.picturesnew.com/media/images/image-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top:0;
bottom:0;
text-align: center;
width: 80%;
left:0;
right: 0;
margin: auto;
height: 100%;
}
ul {
display: inline-block;
position: absolute;
top:0;
bottom:0;
height: 110px;
left:0;
right: 0;
margin: auto;
width: 60%;
border: 5px solid #fff;
list-style: none;
padding:0;
border-radius: 5px;
padding: 5px;
background: rgba(0,0,0,0.4);
}
li {
border: 2px solid #aaa;
margin: 2px;
background: rgba(0,0,0,0.4);
color: #fff;
}
body, html {
height: 100%;
margin:0;
padding:0;
}
HTML:
<div id="largeImage">
<div id="menu">Menu Here</div>
</div>
CSS:
html, body { width: 100%; height: 100%; }
#largeImage {
background: url('path/to/image.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
#menu {
width: 500px;
margin: 0 auto;
}
This should give you the basis of what to do :) Basically the code above is to create a div that is 100% width and height, and then position a menu that is 500px in the middle of that div
I am making a page whose layout is divided into 3 sections : Header, main body, and footer. I want a background image in my main body. Now when i try to do that, i am experiencing a problem. The image is not covering the complete area. It leaves some area at the bottom. Check this fiddle for proper explanation.
Here is what i have done so far:
HTML
<html>
<head>
<title>Gehri Route: Login, Signup</title>
</head>
<body>
<div class='headercontainer'>
<div class='header'>
header
</div>
</div>
<div class='mainbodycontainer'>
</div>
<div class = 'footercontainer'>
<div class='footer'>
footer
</div>
</div>
</body>
</html>
CSS
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
Also please help me to make this responsive design.
You need to force a height to the body and html tag of 100%. If there is no content the background won't appear because the height of the element (.mainbodycontainer) is 0. In your case it was 80px because you applied padding.
check this fiddle. http://jsfiddle.net/olwez/ncLZN/
I added a height to the body and html tags of 100% and a minimum height of 100% to the .mainbodycontainer div. That way you don't have to manually set the heights or have content within the .mainbodycontainer for the image to behave as you wish.
I just threw in an overflow: hidden; on the body tag so that scrolling is gone.
Here is the full css.
html { height: 100% }
body
{
background-color: rgb(250,250,250);
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.headercontainer
{
background-color: rgb(245,245,245);
min-width: 999px;
height:60px;
border:1px solid #666;
left: 0;
}
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
min-height: 100%;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.footercontainer
{
background-color: rgb(245,245,245);
width: 100%;
height:82px;
border: 1px solid #666;
left:0;
position: fixed;
bottom: 0;
}
.header
{
margin: 0px auto;
width: 999px;
}
.mainbody
{
margin: 0px auto;
width: 999px;
}
add this to your style:
width:600px;
height:450px;
.mainbodycontainer
{
margin: 0 auto;
overflow: auto;
background-color: rgb(250,250,250);
min-width: 999px;
padding: 80px 0;
background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:600px;
height:450px;
}
http://jsfiddle.net/QcUfm/9/
A background image will only show as much is revealed either by the content or a height. If your div doesn't have enough content to force the parent element big enough, you won't see it all. Also, if you are using any type of positioning like fixed, absolute or even relative and moving it, that can affect it also. I didn't look at the fiddle but those are some common issues.