I have a contact form in my page and i am trying to increase the size of the background and change its position to no avail.
CSS:
.w2_ajax_contact_form {
width: 30%;
margin: auto;
font-family: Arial;
font-size: 12px;
background: rgba(0, 0, 0, 0.8);
background-position: 0% 20%;
}
I tried a few ways like:
background: rgba(0, 0, 0, 0.8) center center;
and
background-position: 10px;
What am i doing wrong?
background-position is meant to position a background image, not a background color. It is mostly used for working with sprites. I am not sure what you are trying to achieve, but i think you may just want to add some padding to your form.
You cannot move the color. It works only with images. try to increase the height, width or add some kind of padding to the box
Related
I have a website with two pages. Both pages share the same CSS body properties.
When you click the button I have on the home page, it will bring you to a page with a scroll bar. When this page is displayed, the background shrinks/moves to the left just a tiny bit to accommodate for the scroll bar appearing. How can I stop this behavior?
I would like for the background image to be totally static. Here's a small snippet of the CSS.
html {
min-height: 100%;
cursor: url('Pictures/glove-lg.png'), auto;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(Pictures/backgroundDala.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
The only way to avoid that is to use overflow-y: scroll for the body also on those pages whose contents is equal to or not more than 100% high.
That way a vertical scollbar will be displayed on each page and therefore the background will remain the same. Not a pretty solution, but the only one that keeps the background-image consistent.
Use the margin-right property on whatever your parent div is or body (though I'm not 100% sure if the scrollbar is also under body, so if it is, it wont work. If it is, just make a parent div for everything inside body and outside everything else.)
Header screen:
I'd like to move it higher and to the left a little bit, but transform option moves a whole block. How can I deal with it?
CSS
.header {
height: 100vh;
width: 96%;
background-size: cover;
background-position: top;
position: relative;
display: inline-block;
text-align: center;
margin-top: 2rem;
margin-left: 2rem;
&__background {
background-image: linear-gradient(
to right bottom,
rgba($color-main-green, 0.3),
rgba($color-main-purple, 0.5)),
url(../resources/img-cropped/header.jpg);
}
}
Use the background-position property to move the background image. maybe use background-position: top left and if this does not suit the desired results you can also add px values instead of top, left, right and bottom.
Try to experiment until you achieve the desired result.
For example: This piece of code would make the image positioned 30px from the left:
background-position: left 30px center;
The center is for the y value of the image. You could also add px values to this one.
Use background-position, background-size and background-repeat CSS property to adjust the image.
I have this image name plate (PAST CHAMPIONS) for the plague and it looks decent on all screens except for iPhone portrait, it seems to get cut off.
Anyway to make this scale without media css?
Here is home page.
http://www51.myfantasyleague.com/2017/home/61106#0
Original code still in css
#championship_plaque h2 {
background:
rgba(0, 0, 0, 0)
url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
no-repeat
scroll
center center
!important;
border: 0 none;
margin-left: 25px;
text-indent: -9999px;
}
Tried this code to no luck
#championship_plaque h2 {
background:
rgba(0, 0, 0, 0)
url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
no-repeat
scroll
center center
!important;
background-position: 70% 0;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 20px;
padding-top: 20px;
}
Desktop:
Mobile:
I guess I can use media call to switch to a new image for this size screen if all else fails, just want to see if it can be done this way first.
thx
In your second example you're duplicating property values by using the shorthand background property with !important but then overriding them immediately afterwards. I recommend using the longhand properties when you want to be very clear about what's going on.
What you want is background-size: contain - which automatically downscales the image so it's 100% visible in the parent container. You also want to remove the background-color: black:
This is the rule I've got that works for me:
#championship_plaque h2 {
background-image: url("http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Note that if you want to hide text there's a better approach than text-indent: -9999px, instead consider using this combination:
user-select: none;
color: #00000000; /* hex RRGGBBAA, AA=00 means 0% opacity, so the text is invisible */
This question already has answers here:
Weird effect when applying transparent border over an element with a gradient background
(7 answers)
Closed 7 years ago.
I'm using linear-gradients with semi-transparent borders for creating modules and buttons etc. Using (for example) rgba(0,0,0,0.1) as the border colour is convenient, because I can set any background colour on my elements without having to worry about the border colour again.
However I've noticed a very odd effect - when combined with a linear-gradient background, browsers use the height of the element's padding box to calculate the height of the gradient, which means it repeats over the top and bottom margins, creating a very odd effect:
Here is the CSS that generates the "Actual" box:
.box {
box-sizing: border-box;
height: 100px;
width: 100px;
border: 25px solid rgba(0,0,0,0.1);
background-color: #eee;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
margin-bottom: 20px;
}
Now I've already found a workaround that allows me to achieve the desired effect, by forcing the background-size to be 100% + the border size. This is what generated the "Desired" box (.box2):
.box2 {
background-position: 0 center;
background-size: auto calc(100% + 50px);
}
However that seems a bit hacky.
So my question is: Can anyone explain why this is - I can't find it documented anywhere, and does anyone have a neater solution?
Here's the JS Fiddle that I used to create the examples, and it also includes a box with an actual image background for comparison: http://jsfiddle.net/29rgksgx/4/
You can choose which of the boxes is used as a reference for the background
Choose border-box and it will work as desired
You can choose between border content and padding box
.box {
box-sizing: border-box;
height: 100px;
width: 100px;
border: 25px solid rgba(0,0,0,0.1);
background-color: #eee;
margin-bottom: 20px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
background-origin: border-box; /* the trick */
}
<div class="box"></div>
I'm wondering if the following is possible with CSS.
I'd like there to be 3 horizontal bars running across the entire width of a background. Here's a rough mockup of what I would like the background to be
I've been toying with the following but I can't seem to be able to position any of the backgrounds.
#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
url("bg2.png"),
url("bg3.png");
background-position: 10px 10px,
170px 10px,
750px 10px;
background-repeat:repeat-x;
}
Here's a fiddle: http://jsfiddle.net/5fo054L2/1/
Any idea what I'm doing wrong?
You almost have it. The issue is that you have the x and y position confused. Also, x position doesn't have any meaning if it repeats.
.blog {
width: 100%;
height: 100%;
background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png");
background-position: 0px 170px, 0px 100px, 0px 10px;
background-repeat: repeat-x;
}
Here is an updated jsfiddle: http://jsfiddle.net/5fo054L2/3/
Note that the vertical height (of text in your example) will limit the amount of the background images you see.
You can also make three image files, place them below everything else, and set them using absolute positioning.