Fiddle link:
https://jsfiddle.net/ildaroit/evL7tn6r/
.video-wrapper {
max-width: 640px;
margin: auto;
margin-top: 20px;
}
.video1 {
border: 0px dotted black;
height: 420px;
/*height:50vw;*/
background: url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") left -3px no-repeat, url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") right -3px no-repeat;
/* background-position: left, right;*/
background-repeat: no-repeat, no-repeat;
}
How to make the image not overlapping center div content on decreasing windows size?
Like here: learn.shayhowe.com
Now, left and right image overlap .video but need to make it fixed or something else.
Thx in advance!
hello do you mean like this?
https://jsfiddle.net/evL7tn6r/6/
just add a wrapper to your video1
.page{
width:100%; /*this is not really necessary*/
overflow:hidden;
}
and a min-width to the video
you can adjust the min-width to set the minimum space between the graphics
Related
So, in my previous post I was asking how I can diplay a 500x500 image, with that image to only be resized towards the x axis and not y.
.image {
border: 1px solid blue;
background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
width: auto;
height: 500px;
max-width: 100%;
}
I use border to understand a bit better the borders of the image. I tested this and works fine except for the fact that when I resize it towards the x axis it's indeed resized but it gives a blank area at the bottom:
How can I fix this so no blank bottom area appears, the border to fit always the image? Ty
The width of your container is not 500px, so therefore the background image is being reduced in height to maintain its aspect ratio. If you would like to entirely fill the <div>, you can use background-size: cover, as follows:
.image {
border: 1px solid blue;
background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 500px;
max-width: 100%;
}
<div class="image"></div>
Perhaps use img tag and make this img responsive? here is my solution:
https://jsfiddle.net/7rwp5jf4/
Html:
<div>
<img src="http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg">
</div>
Css:
DIV {
border: 1px solid blue;
width: auto;
height: 500px;
max-width: 100%;
}
div img{
width:100%;
height:auto;
}
Is there a way to set a background css sprites image width?
shop
a{
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: block;
background-position: -5px -5px;
padding: 0 0 0 30px;
}
https://jsfiddle.net/jb1prcro/
right now the above a tag is 60px width, 30px for the word 'shop', 30px padding left for the cart icon,
because I am using css sprites for the background icons, right now it is showing 60px of that background image instead of just the 30px I want to show.
I also tried background-size: 30px 30px for this A tag, but it doesn't work.
You can use the pseudo-element before:
a{
display: inline-block;
background-position: -5px -5px;
padding: 0 0 0 30px;
height:30px;
vertical-align:middle;
}
a:before {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
width:30px;
height:30px;
display:inline-block;
content:'';
vertical-align:middle;
}
Working example: https://jsfiddle.net/mspinks/jb1prcro/2/
I am not sure what exactly you are trying to achieve, but here's a practical example:
https://jsfiddle.net/ozL0yzuy/
a {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: inline-block;
width: 40px;
background-position: -10px -20px;
}
You have to set a width (and actually also a height, which I didn't do in the example) for the element itself (in this case the a tag, which can only be done if its a block or inline-block element). Then you can adjust the background position accordingly.
I have a website with a cover image.
The problem is when a user resizes the window, the background does not stay fixed and full height.
What I want:
A way for the background image to stay fixed and full height whilst the user resizes the window.
This is what I have so far:
#top {
width: 100%;
height: 200px;
border-bottom: 1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
http://jsfiddle.net/h64vyr60/
Is this what you are looking for?
Just need to set background size as cover, and add a media query:
#top{
width: 100%;
height:200px;
border-bottom:1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: contain;
background-position: top center;
background-repeat:no-repeat;
background-attachment:fixed;
}
#media screen and (max-width:900px) {
#top{ background-size: 900px auto;} //900px is the image original width
}
<div id="top"></div>
https://jsfiddle.net/hwzhsrer/
You can just keep background-size set to initial, or remove background-size property. This will retain the image height when the page is resized.
#top{
width: 100%;
height:200px;
border-bottom:1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: initial;
background-position: top center;
background-repeat:no-repeat;
background-attachment:fixed;
}
<div id="top"></div>
Hope that helps you out!
I am looking to fix my second full width image (the one in the middle of the page) so that is fits horizontally the same as the one above in the header image. Can somebody double check my CSS so see if it is correct. It needs to auto resize to fit the screen like the header image above. When i view it on mobile it is not fitting correctly. Thanks for taking a look.
http://www.jobspark.ca
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
border-bottom: solid 1px #ddd;
border-top: solid 1px #ddd;
margin-left: -1600px;
margin-right: -1600px;
padding-top:20px;
padding-bottom:330px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
}
You need to add the height on to your div I think. Here's the fiddle. I just added a height to the div and now it resizes fine... Is that what you needed it to do?
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
width:100%;
background-position:center;
height:575px;
}
Updated css (still resizes)
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: bottom center;
background-size: cover;
height:575px;
background-attachment: scroll;
background-repeat: no-repeat;
}
I am doing a website in wordpress. And under the navigation I have container(id="cover_photo") for image(id="cover_photo_image).I center it with margin but I want to move it down, and center it in the container, but the container follow if I put margin on it.
HTML
<div id="cover_photo">
<p id="cover_photo_image">
</p>
</div>
CSS
#cover_photo {
width: 100%;
height: 278px;
background-color: #6b0c0b;
box-shadow: inset 0px 0px 3px 0px #888, 0px 0px -3px 0px #888;
}
p#cover_photo_image {
width: 821px;
height: 172px;
display: block;
margin: 0 auto;
margin-top: 6px;
background-image: url(images/cover_photo.png);
}
Plopped your code into a fiddle and saw what you mean. The problem is that you haven't set positioning for #cover_photo or #cover_photo_image. The outer element needs to be relative, the inner needs to be an absolute.
#cover_photo {
position: relative;
}
p#cover_photo_image {
position: absolute;
}
I changed the sizes so it would fit into the preview, and if you try adjusting the margin values it should move around and not move the #cover_photo container.
http://jsfiddle.net/ESCNm/
Just in case you're are looking to automatically vertically and horizontally align an element within an element, there are a LOT more methods that manual positioning. Manual positioning is such a hassle, and I try to avoid absolutes whenever possible.
Here an article about it: http://www.vanseodesign.com/css/vertical-centering/
About vertical and horizontal centering.
You can use Flex.
Please add the following code
#cover_photo {
display: flex;
justify-content: center;
align-items:center;
}
p#cover_photo_image {
border: 1px solid black;
background-repeat: no-repeat;
background-image: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-
sidebar-promo.svg?v=47faa659a05e);
background-size: contain;
background-position: center;
}
This should be the effect you want.
enter image description here