I'm in a situation since 3 day and I don't have found any answer to my question : how have div on the same width (containing images with a width of 320px) on the column (that's done) but not organize in line ?
Let me join a little sketch to explain that : at the left, it's what I've. At the right, it's what I want. (the second line is for the "media screen" when reducing the width of the screen/navigator : so have 4 to 3 to 2 to 1 (and vice versa). take care of the number of boxes) :
To explain how I've obtain this right part, here are the code :
html:
<div class="box">
<img src="#" alt=""/>
</div>
Simply a succession of this class, it can be directly on the body.
The box is important because maybe I'll have to had tittles or others things.
css:
.box {
position: relative;
float: left;
min-width: 340px;
max-width: 24.80%;
width: 24.79%;
margin: 20px 0px 20px 0px;
}
#media only screen and (max-width: 1800px) {
.box {
min-width: 360px;
max-width: 33%;
width: 33%;
}
}
To complete this question, here are a restriction : it had to be dynamic and generic (so like that, I just have to make a copy of a div and replace the link of the image (that's before adding php and js), or add anything I want).
You should check out jQuery Masonry (http://masonry.desandro.com), which does exactly what you need.
If you cant use Masonry for some reason, you should first split your page in columns. Then stack div boxes in each column.
I had just tried to make like that right picture & I made that with seven div and all are in same width plus all picture in it are 320px same on size.I haven't tried with width.No media work I have to learn them too :)
<body>
<div id='box1'>1</div>
<div id='box2'>2</div>
<div id='box3'>3</div>
<div id='box4'>4</div>
<div id='box5'>5</div>
<div id='box6'>6</div>
<div id='box7'>7</div>
</body>
/* css code!*/
body
{
margin: 0px;
}
#box1
{
width:450px;
height:300px;
background-image: url('sheep.jpg');
background-repeat: no-repeat;
background-color: #da1;
background-size:320px;
position:absolute;
left:1px;
}
#box2
{
width:450px;
height:380px;
background-image: url('sheep.jpg');
background-repeat: no-repeat;
background-size: 320px;
position: absolute;
left:451px;
background-color:#df4;
}
#box3
{
width:450px;
height:195px;
background-image: url('sheep.jpg');
background-repeat: no-repeat;
background-size: 320px;
position: absolute;
top:0px;
left:901px;
background-color:#dd6;
}
#box4
{
width:450px;
height:658px;
background-image: url('sheep.jpg');
background-repeat: no-repeat;
background-size: 320px;
position: absolute;
left:1px;
top:300px;
background-color:#ced;
}
#box5
{
width:450px;
height:578px;
background-image: url('sheep.jpg');
background-repeat: no-repeat;
background-size: 320px;
position: absolute;
top:380px;
left:451px;
background-color:#cbb;
}
#box6
{
width:450px;
height:470px;
background-image: url('sheep.jpg');
background-repeat: no-repeat;
background-size: 320px;
position: absolute;
top:195px;
left:901px;
background-color:#ad9;
}
#box7
{
width:450px;
height:298px;
background-image: url('sheep.jpg');
background-repeat: no-repeat;
background-size: 320px;
position: absolute;
top:660px;
left:901px;
background-color:#d8f;
}
Related
I am having difficulty trying to make the logo at the top of my web page change when I hover over it.
To be more specific, I have a logo at the top of my page, and I created another logo slightly different for when a user hovers over it.
Here is my code:
#top{
width:1366px;
height:100px;
background-color:#1e125b;
}
body{
background-color:white;
background-repeat:repeat;
margin: 0;
}
#top:hover{
background-image: url('Logo_hover.png');
}
The Logo_hover multiplies itself throughout the whole div, instead of simply changing the initial image. I understand that the background-image is not what I should be using for this problem but I cannot seem to find any other solutions.
#top:hover{
background-image: url('Logo_hover.png');
background-repeat: none
}
have you used this.onmouseover & this.onmouseout ?
<img src='your pic' onmouseover="this.src='your pic on mouse over';" onmouseout="this.src='your pic on mouse out';" />
.logo {
background-image: url("http://placehold.it/120x120&text=image1");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
.logo:hover{
background-image: url("http://placehold.it/120x120&text=image2");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
<div class="logo"></div>
#top{
background-image: url(logo.png);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
width: 120px;
height: 120px;
}
#top:hover{
background-image: url(logo_hover.png);
}
I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.
In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.
Simple code:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: auto;
height: 40px;
background-size: 319px 349px, auto;
}
<div id="nav1"></div>
And the problem is I don't want to show these 2 icons. I want to show only the first one:
How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.
It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
background-size: auto;
height: 40px;
width: auto;
}
i.icon1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
background-size: 319px 349px;
display: inline-block;
height: 40px;
width: 40px;
}
<div id="nav1"><i class="icon1"></i></div>
If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.
You would have to specify a width.
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
width: 40px;
height: 40px;
background-size: 319px 349px, auto;
position: relative;
}
#nav1:after {
content: "";
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: 232px;
height: 40px;
position: absolute;
z-index: -1;
}
<div id="nav1"></div>
I have read so many posts about responsive CSS Background-Image's but I can't make mine work.
My site is http://www.conn3cted.uk.tn/intManagement.html and I'm trying to use the image as a 'banner' so can't have the height too large.
I seem to be able to fix the issue either on Desktop or Mobile, but they don't want to work together. I've used the suggested solutions (below) but I don't get the whole picture to scale up/down and it only shows part of it or a lot of white space. What am I doing wrong!?
.whatWeDo {
padding-top: 100px;
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 120px;
}
Try this css and use media queries to change your margin-top for mobile device:
.whatWeDo {
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
height: 100vh;
margin-top: 80px;
}
#media screen and (max-width: 878px) {
.whatWeDo {
margin-top: 170px;
}
}
Try this css with replace your css:
This can also responsive only set top as per you needed:
.whatWeDo {
background-image: url("/images/intManagement/homePage/whatwedo.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
float: left;
height: 100%;
padding-top: 100px;
position: relative;
top: 80px;
width: 100%;
}
I need to have two divs with images equally spaced from the center of the page, one on the left and another one on the right, above central div.
I have tried to make an example in the following picture:
the main page div (flowers) is 1024 pixel, and the two right/left blue divs need to stay in the same position...
I am not that CSS expert ...how can I achieve this behaviour?
my CSS code so far:
.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
//left: calc(-60vw + 50%);
left: calc(-50% + 600px);
margin-left: -150px;
z-index: 100;
}
.overlay-right{
background-color: transparent !important;
background-image: url("/images/background-right.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
//left: calc(+130vw - 50%);
left: 1024px;
margin-left: 100px;
z-index: 100;
}
What you need is define a parent for your image (here #parent) and put image, and two other div[s] inside that parent.
You can do this:
#parent{
position:relative;
}
#parent img{
max-width:94%;
display:block;
margin:auto;
}
#parent> div{
width:50px;
height:300px;
background:rgba(125,125,255,0.5);
position:absolute;
top:0;
bottom:0;
margin:auto;
}
#right{
right:0;
}
#left{
left:0;
}
<div id="parent">
<img src="http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg"/>
<div id="right"></div>
<div id="left"></div>
</div>
I think I managed the problem by using Calc.
I need to calculate half of the width of the page and then subtract or add a fixed number of pixels.
I Wa using Left with Calc with no luck, until I found this:
How to set the 'left' property of my div using css3 calc?
so basically I needed to use webkit-calc, moz-cal instead of simple "calc"
Now this is a snippet of working CSS:
.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
left:-webkit-calc(100%/2 - 842px);
left:-moz-calc(100%/2 - 842px);
left:calc(100%/2 - 842px);
z-index: 100;
}
Newbie here hacking away at this little project:
http://development.puretapecult.divshot.io/
And my question is, how do I automatically resize the .pngs in the center of the screen when the browser size collapses, or when it is viewed on a mobile browser?
Do I have to use #media queries for mutliple viewing sizes, and create multiple classes for each png?
Any help appreciated.
CSS classes that modify the images:
.spinner-outer {
display: block;
width: 327px;
height: 327px;
position: absolute;
left: 50%;
margin-left: -163px;
border-radius: 50%;
background: url(spinner-outer.png) center center no-repeat #32302e;
}
.spinner-center {
height: 200px;
width: 200px;
position: absolute;
background: url(spinner-center.png) center center no-repeat;
border-radius: 50%;
left: 50%;
top: 50%;
margin: -99px;
pointer-events: none;
}
.play-sprite {
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 -35px;
background: url(play-sprite.png) 0px 0px no-repeat;
height: 70px;
width: 70px;
}
I would use media queries to change the height and width of the divs. Note that you do not need to create multiple classes for different sizes. Just use multiple media queries like this:
#media (max-width: 768px) {
.spinner-outer {
width: 200px;
height: 200px;
}
}
You'll also need to specify that you want your background image to fit the size of the div or it won't change sizes when the div does. Use the CSS3 property background-size as long as you're comfortable not supporting old browsers.
.spinner-outer {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
More info on background-size and some alternative techniques if you want to support older browsers: https://css-tricks.com/perfect-full-page-background-image/.
Try somthing like this.
HTML:
<div class="image-wrapper">// Div will always re-size with page.
<img src="[src]" />
</div>
CSS:
.image-wrapper{
max-width:90%;
height:auto !important;
position: relative;
display:block;
margin:0 auto;
}
.image-wrapper img{
max-width:100% !important;
height:auto !important;
display:block;
}
Or you can use bootstrap and add a class to image like so.
.img-responsive
Makes an image responsive (will scale nicely to the parent element)
<img src="[src]" class="img-responsive" alt="[Alt]">