Can I somehow apply negative margin left and right for 5px on this background css?
background: url("/wp-content/themes/custom-1/images/shadows.jpg") repeat-x center bottom;
You can make negative margin on the element:
.box {
background: url("/wp-content/themes/custom-1/images/shadows.jpg") repeat-x center bottom;
width: 100%;
height:200px;
background-size:cover;
position:relative;
margin: 0 -5px;
}
If this doesn't help you please provide us html and css for the element and his parent.
Related
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
I'm trying to center an image inside a div, it gets close, but still is not really centered. The image is 976x976 px. The following is the CSS:
div {
margin-left: auto ;
margin-right: auto ;
border:1px solid #ccc;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("images/background.png") center center no-repeat;
}
The image must to be centered, but its exorbitant at the top and right, that is:
Looking at your provided URL I saw that positioning the background-image is indeed positioned more towards the top due to the fact the bgimage is larger than the div itself. Therefore you need to play with the percentages.
background: url("images/background.png") no-repeat 50% 18.5%;
Could solve your problem and place the image in the center of you div
Seems to be working fine??
Ive changed the order of your shorthand css and used 50% instead of center.
div {
position: absolute;
width: 100%;
height: 100%;
}
div {
margin-left: auto ;
margin-right: auto ;
border:11px solid red;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("http://lorempixel.com/output/fashion-q-c-976-976-4.jpg") no-repeat 50% 50%;
}
<div></div>
Your image on your link is a rectangular image with the circle at the top so isn't square.
Crop that image for your code to work!
I have tag with 25px padding and 15px border from left. And I am using arrow background image in it. Is it possible to show this background image above the border?
Here is HTML
<a id="arrow">List</a>
CSS
a#arrow {
background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
}
Here is jsfiddle link
You can put your background to the :after element as a method
CSS
#arrow:after {
content:'';/*enable after element*/
position: absolute;
top: px;/*position of the background*/
left: px;/*position of the background*/
background: url(img/your-bg.png) no-repeat;
width: px;/*width of the background*/
height: px;/*height of the background*/
}
And dont forget to add position:relative to the #arrow
You can use background position to view your image.
here is fiddle
Your css should be
a#arrow{ background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
background-position: -36px;
}
Use background-position property with values in pixels to show them on top.
For instance,
background-position: xxpx (for left-right) xxpx (for top-bottom);
PS: xx is a dummy value, which you can replace with actual numbers.
I'd like to have a thin "shadow" line between my DIVs, as separator. Since I'd like the shadow line to be thiner and with more opacity at the top and at the bottom, I have created 3 images: middle shadow, top shadow and bottom shadow. Problem: I don't know how to place the "top shadow" image at the top of "middle shadow" and "bottom" shadow at the bottom (without multiple DIVs). I'm attaching an image done in fireworks where you can see and example of the shadow line.Many tks
div#content-center {
overflow: hidden;
background: khaki;
background: transparent url('images/middle_shadow.png') repeat-y top left;
padding: 0px 0px 0px 50px;
}
You also might be abel to do this with the :before and :after psedo-elements. Read up on them here if you aren't familiar.
#content-center{
background: url('images/shadow_repeat.png') center right repeat-y;
}
#content-center:before,
#content-center:after{
content:'';
display:inline-block;
position: absolute;
background-repeat: none;
/*size these to be what you need*/
height:100px;
width:100px;
}
#content-center:before{
top:0;
background-image: url('images/shadow_top.png');
}
#content-center:after{
bottom:0;
background-image:url('images/shadow_bottom.png');
}
Give multiple backgrounds:
background: url('images/middle_shadow.png') top left, url('images/middle_shadow2.png') center left,url('images/middle_shadow3.png') repeat-y bottom left;
I have a vertical menu with a background. I need to shift the background to the right and in the center from top but an unable to do this. http://www.tiikoni.com/tis/view/?id=b0b07d2
ul.nav
{
margin:0; background-position:center; background-image: url(../images/nav_bg.gif);font-family: "Century Gothic"; height:40px; padding-left:30px;
}
ul.nav a{
height:19px;color:white;display:inline-block;font-family:Century Gothic,Arial;font- size:14px;padding:8px 20px 0 ;text-decoration:none !important;vertical-align:middle;
}
ul.nav a:hover
{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;background-image: url(../images/nav_over.gif);
background-position: center top;background-repeat: no-repeat;text-decoration:none !important;vertical-align:middle;
}
* html ul.nav a
{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;text-decoration:none !important;vertical-align:middle;
}
ul.nav a.highlight{
color:white;display:inline-block;font-family:Century Gothic,Arial;font-size:14px;height:19px;text-decoration:none !important;vertical-align:middle;
}
ul.nav li{
display: inline;
color:#FFF;
background-image: url(../images/white_dotline.gif);
background-repeat: no-repeat;
background-position:right center;
font-size:14px;
padding:8px 1px;
font-family:"Century Gothic";
height:19px;
[height:19px;
height:20px;]/*Google Chrome, Opera and newer Safary 4+*/
}
The horizontal and vertical position is controlled by the background-position property. The first number defines the horizontal position and the second the vertical position.
Words can be used for horizontal such as left, right and center and for vertical it is top, bottom and center. Absolute positions can be used also, such as pixels or ems, as well as percentages.
For example:
background-position: right top; /* positioned to the right and the top */
background-position: 100% 0; /* positioned 100% to the right and zero from the top (the same as above) */
background-position: 50px 200px; /* positioned 50px from the left and 100px from the top */
You have specified a single value for the background position, which means that it's used for horisontal positioning, and the vertical positioning is set to 50%. You should specify two values to control both positions. Example:
background-position: left center;