I have a background-image for my body element.
I have put input buttons, and I would like them to have the same background as my body element in a prolongation (not setting the background again).
Is there a way to do that with CSS3 ?
Code:
body{
background-image: url("images/fond.jpg");
background-size: 100% auto;
}
.input-button{
/* Code here */
}
you can set background:transparent
body {
background: url("//lorempixel.com/1600/900") no-repeat 0 0 / 100% auto;
}
.input-button {
background: transparent;
outline: 0;
border: 0
}
<input class="input-button" type="text" placeholder="I'm a input" />
Your code should be like this
body{
background-image: url("images/fond.jpg");
background-size: 100% auto;
}
.input-button{
background-color: transparent;
}
Related
I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.
So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.
I set the panel to blue with the css background: #6DB3F2; and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.
Is it therefore possible to set z-indexes for the background color and the background image?
You need to use the full property name for each:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Or, you can use the background shorthand and specify it all in one line:
background: url('images/checked.png'), #6DB3F2;
For me this solution didn't work out:
background-color: #6DB3F2;
background-image: url('images/checked.png');
But instead it worked the other way:
<div class="block">
<span>
...
</span>
</div>
the css:
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Based on MDN Web Docs you can set multiple background using shorthand background property or individual properties except for background-color. In your case, you can do a trick using linear-gradient like this:
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
The first item (image) in the parameter will be put on top. The second item (color background) will be put underneath the first. You can also set other properties individually. For example, to set the image size and position.
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Benefit of this method is you can implement it for other cases easily, for example, you want to make the blue color overlaying the image with certain opacity.
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Individual property parameters are set respectively. Because the image is put underneath the color overlay, its property parameters are also placed after color overlay parameters.
And if you want Generate a Black Shadow in the background, you can use
the following:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
You can also use short trick to use image and color both like this :-
body {
background:#000 url('images/checked.png');
}
really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
The next syntax can be used as well.
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
It allows you combining background-color, background-image, background-position and background-repeat properties.
Example
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
This actually works for me:
background-color: #6DB3F2;
background-image: url('images/checked.png');
You can also drop a solid shadow and set the background image:
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
If the first option is not working for some reason and you don't want to use the box shadow you can always use a pseudo element for the image without any extra HTML:
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
Here is how I styled my colored buttons with an icon in the background
I used "background-color" property for the color and "background" property for the image.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
Assuming you want an icon on the right (or left) then this should work best:
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
You could also do background-size: contain;, but that should be mostly the same. the background-position will depened on your image.
Then you can easily do an alternative state on hover:
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
You can try with box shadow: inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
<li style="background-color: #ffffff;"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></li>
Other Sample Box Center Image and Background Color
1.First clearpixel fix image area
2.style center image area box
3.li background or div color style
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
I am using an input in one of my projects and I'm making a dotted line on the bottom. Ideally, I would like to have about 5 dots about 10px wide each. Kind of like the example below: ________ ________ _______ ______ _____.
This is the code that I have so far :
input {
border-bottom: 3px tomato dotted;
}
<input type="text" numbers-only>
Use gradient
input {
border-bottom: 3px solid tomato;
border-bottom:none;
background:repeating-linear-gradient(to right,tomato 0 10px,transparent 0 15px) bottom/100% 3px no-repeat;
}
<input type="text" numbers-only/>
Try using a background with linear-gradient to get 5 lines like this:
input {
border-bottom: none;
background-image: linear-gradient(to right, black 90%, white 0%);
background-position: bottom;
background-size: 40px 1px;
background-repeat: repeat-x;
}
<input type="text" numbers-only />
I don't think there's a way to change the default styling of the dotted border type.
This answer uses the background-image property with a gradient to simulate a border.
You can use this trick on an element behind your input like the following example.
#my-input {
/* Keep form compatability by
using an inline display type */
display: inline-block;
/* Make some space at the bottom
for the gradient to show under
the input */
padding-bottom: 2px;
background-image: linear-gradient(to right, tomato 50%, transparent 0%);
background-position: bottom;
background-size: 20px 2px;
background-repeat: repeat-x;
}
#my-input input {
border-bottom: 0;
}
<div id="my-input">
<input type="text">
</div>
I want to keep the star yellow when I click on it and deselected the color when I re-clicked.
I try to use the :active option.
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<div class="fave"></div>
your can try this by using checkbox if you want to do it with NO js only css
[type="checkbox"]{
display:none;
}
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
display: inline-block;
}
[type="checkbox"]:checked ~ .fave {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<input type="checkbox" id="cb1">
<label class="fave" for="cb1"></label>
:active means while the mouse button (or key) is held down.
It is not a toggle state.
CSS has no mechanism for adding a toggle state.
For that you'll need a checkbox (which you can combine with the :checked pseudo-class) and/or JavaScript (the specifics depending on the semantics you are trying to express).
i think you want something like this
jQuery(document).ready(function() {
jQuery(".fave").click(function() {
jQuery(this).toggleClass("active");
})
})
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover,
.fave.active {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fave"></div>
body{
color:red;
background-image: url("image.jpg");
background: rgba(255,255,255,.85);
}
This my css code for semi-transparent. It's not working. It completely overwrite my image. So, I tried to put background: rgba(255,255,255,.85); into other section like h2 or p. It works fine.
Does anyone can tell me what is going on? Thank you.
Your shorthand background: property overwrites the previous longhand background-image property.
Do this instead:
body {
color: red;
background: rgba(255,255,255,0.85) url("image.jpg");
}
Alternatively, use two long-hand properties:
body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image.jpg");
}
Your short-hand property of background overrides the background, so you need to do like this:
body{
color:red;
background: url("image.jpg") no-repeat;//now it works which doesn't support rgba
background: rgba(255,255,255,.85);
}
you can also get the transparent image using pseudo element. Have a look at DEMO.
div{
color: red;
height:100%;
width:100%;
}
div:after
{
content: "";
display:block;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
opacity: 0.5;
-moz-opacity: 0.5;
background: url("http://lorempixel.com/700/700/") no-repeat;
}
#user3822798 You are not understanding background property correctly.
When you use,
body{
color:red;
background-image: url("image.jpg");
background: rgba(255,255,255,.85);
}
background property which is at las overrides background-image, thus you see only color.
But as mentioned by #Dai if you use,
body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image.jpg");
}
You can get both image & color at same time, but since your image is in jpeg format, it is opaque & you can not see color behind it.
to see it use a small background image & use this code,
body {
color: red;
background-color: rgba(255,255,255,0.85);
background-image: url("image-small.jpg");
background-repeat:no-repeat;
background-position:center center;
}
You can see transparent white color & your small image in middle.
Now my question is, why the hell do all this things? can't you simply use a transparent PNG?
Make a transperant PNG Image & use following code:
body {
color: red;
background:url("image.png");
}
I was wondering how I could do a background something like the home page of Droplr? It looks very cool, and want to use that as the background for my website. It is at https://droplr.com/hello.
It's a personalized background. Click here to have it. After that, you need to add some css property to make the background fit to the screen :
From the source code of Droplr, I found :
.theElement {
background: none repeat scroll 0% 0% #575A60;
background-color: #575A60;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
color: #FFF;
text-shadow: none;
}
Hope this help.