Background image disappears whenever I try to alter its dimensions - html

The image displays when I use this code:
body {
background-image: url("iuerghreugh.jpg")
}
but when I use the code below, the image I use for my background simply disappears. I'm very new to HTML and CSS so I feel I could be missing something very basic.
body {
background-image: url("iuerghreugh.jpg")
background-size: 100% 50%;
background-repeat: no-repeat;
}
Thanks.

There's no semicolon after the first rule:
background-image: url("iuerghreugh.jpg")
//--------------------------------------^ Add a semicolon ; here.
Solution
body {
background-image: url("iuerghreugh.jpg");
background-size: 100% 50%;
background-repeat: no-repeat;
}

You're missing the semicolon after the url line

missing semicolon at the end of background image property

Semicolon is missing after url for background-image. You can also consider combining everything, as in the following:
body { background: url("iuerghreugh.jpg") 0 0 / 100% 50% no-repeat; }
In the above, 0 0 before the / is for position, and after / is for size.

Related

problem with background-image : url("img/download.jpg") ;

when import image in css noting happen but I check (address) and everything on code
for example I write this on my style :
* { background-image: url('img/download.jpg') ; background-repeat: no-repeat ; }
and then add background color but not happen again
my url direction is true and file exist
and no where in my code this work
I use external style code and link it in head and other property work clean(work with vs code)
somebody help me with this
Try to use it this way body {background-image: url(img/download.jpg);background-repeat: no-repeat ; } and no need to use quotes.
body
{
background-image: url(https://i.stack.imgur.com/AnJVo.png?s=256&g=1);
background-repeat: no-repeat ;
}
<body></body>
You must set background-size to show background-image
body
{
background-image: url(https://i.stack.imgur.com/AnJVo.png?s=256&g=1);
background-size : 100px;
background-repeat: no-repeat ;
}

How to repeat background image with css

I need repeat as background image gried.png image in welcome.blade.php in My app. I need create class selector file in css folder for this.
this is My welcome.css file in public/css folder
.background-image{
background-image:transparent url("/imgs/grid.png");
background-repeat:repeat;
}
This is my welcomeblade.php file
<link rel="stylesheet" href="/css/welcome.css" />
<div class="background-image"></div>
But this code did not generate any result, how can I fix this?
transparent is not a valid value for background-image. It's a value for background-color.
.background-image {
background-color: transparent;
background-image: url("/imgs/grid.png");
background-repeat: repeat;
}
should work.
See it here (with a different url for the image): https://jsfiddle.net/h0revzu5/
Just try background-attachment:repeat;
Example of background-repeat:
body {
background-image: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
background-repeat: repeat;
}
OR
Also by default it repeats when you set background,
body {
background: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");
}
Default background-color is background-color:transparent;

CSS Mask not working on firefox

I'm trying to show a SVG image using mask but in Firefox it isn't appearing. My CSS class is as follows:
.myClass {
-webkit-mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
background: rgba(67, 67, 67, 0.8);
width: 1.15em;
height: 1em;
}
And html code is just a simple:
<div class="myClass"></div>
In chrome, my masked arrow-down.svg is showing nicely but in firefox a div with specified background is appearing. Any idea on how to solve my problem?
mask: url('../img/arrow-down.svg') no-repeat 100% 100%;
is invalid. You can't have a mask that's an entire SVG file, it must have a fragment identifier that points to a mask element.
On top of that, Firefox currently doesn't support any additional parameters beyond the url so the no-repeat 100% 100% will cause it to fail.
For Firefox what you need is something like this:
mask: url('../img/arrow-down.svg#maskelement')
where maskelement would be the id of a <mask> element within the arrow-down.svg file.
For anyone who may still be wandering, the following works fine for me, by inserting the encoded svg string as a data uri (not base64!):
.my-class {
--svg-icon: url('data:image/svg+xml;utf8,...');
mask: var(--svg-icon) no-repeat;
mask-size: 100% 100%;
-webkit-mask: var(--svg-icon) no-repeat;
-webkit-mask-size: 100% 100%;
background-color: currentColor;
height: 1em;
width: 1em;
}
I was able to pull this off thanks to some nice tutorials/examples by Anthony Fu and Noah Blon:
Icons in Pure CSS
Iconify source code
Coloring SVGs in CSS Background Images

Change background in custom blogger template that hasn't body.backround

I have custom Galauness template on blogger (http://nethoroskop.blogspot.com) but I would like to upload my own image...Can you tell me how? In html code there is NOT
body{ background
There a lot of other backgrounds (like post background,total-wrapper background, lightbox-container-image-data-box background,etc) but not body.background at all!
You need to find and edit this section to add your own background image:
body {
background: #ffffff;
background-image: url(http://i1273.photobucket.com/albums/y417/trynitezoo/winterpaper_zps5a2f39a3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
margin: 0;
}
or you can override the background image. You only need to copy and paste the following code in the header tag section and replace the YOUR NEW IMAGE PATH to the image url you needed:
<style>
body {
background-image: url('http://YOUR NEW IMAGE PATH') !important;
}
</style>
If you want to change the background of the body to an image this would be the best way. Change the <body> to this:
<body background="image.jpg">
Tutorial from : http://www.w3schools.com/tags/att_body_background.asp

Bootstrap CSS - Can't Get Background Color and Image Together

I'm using Bootstrap with Rails and can't get the brackground color and image to show up together. I have a custom CSS stylesheet where I'm trying to edit the body to have a dark background with a small image in the bottom right corner, like this:
body {
padding-top: 55px;
background-color: #2e2e2e;
background-attachment: fixed;
background-image: url('waves.png');
background-repeat: no-repeat;
background-position: right bottom;
}
Problem is that the image doesn't show up, just the background. If I remove the 'background-color' it shows up and looks perfect, but I can't get them together. I know I'm missing something small (probably stupid too). Appreciate the help.
Have you tried this way?
body {
padding-top: 55px;
background: #2e2e2e url(waves.png) right bottom no-repeat;
background-attachment: fixed;
}
make sure the file extension is .css.erb
body {
padding-top: 55px;
background: #2e2e2e url('<%= asset_path('waves.png') %>') fixed no-repeat right bottom;
}
Not sure about the environment you're in, but have you tried !important ? It adds priority in case there are styles with different values applied somewhere later in code.
body {
...
background-color: #2e2e2e !important;
background-image: url('waves.png') !important;
...
}
Try to put the waves.png file in /assets/images and replace url('waves.png') with this:
background-image: image-url('waves.png');
I'm assuming you're using assets pipeline and your CSS file is preprocessed by Sass (the stylesheet filename ends with .css.scss), for more information I suggest you to read the Asset Pipeline Rails Guide.