Comments on: background

By: Pedro Monteiro

Pedro Monteiro — Sat, 26 Oct 2019 04:25:48 +0000

hey guys, I need to make a background darker, but can't do it by itself(only darken the background image, not the content inside)

.body__header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-area: valtech;
  background: url(/dist/img/Lagoa.jpg) no-repeat center center/cover;
  border-radius: 10px;
  text-align: center;
  // filter: brightness(98%);
  // filter: grayscale(45%);
  height: 55vh;
  width: 100%;
}

By: Khaki

Khaki — Fri, 21 Jun 2019 15:39:34 +0000

In reply to Kathleen. You can find that information here:

By: Geoff Graham

Geoff Graham — Mon, 19 Feb 2018 20:23:12 +0000

In reply to Sandra. Those // mean that the property is commented out and will not render. If you remove them, that property will be included in the code. ...but that begs another question: are you editing a CSS file or some other type of file? That type of comment format is used by something like Sass (.scss), Less (.less) or another CSS preprocessor.

By: Sandra

Sandra — Mon, 19 Feb 2018 18:32:32 +0000

In reply to Geoff Graham. Thanks so much for getting back to me. I can try to remove the element altogether and see what happens. As far as I can see, no other element is using this violet-fabric.gif, but in two places the css uses a violet hex code which should not be affected at all. Forgive my ignorance, what why does that line of coding have // in front of it? (I am very new to this all and learning as I go)

By: Geoff Graham

Geoff Graham — Mon, 19 Feb 2018 14:19:55 +0000

In reply to Sandra. Hey! Are you able to remove the image from the background property altogether? background: #cccccc; Also, is it possible that there is another element that is using the violet color? If so, you may need to remove it from there as well.

By: Sandra

Sandra — Mon, 19 Feb 2018 07:30:56 +0000

We have this in our CSS file and our blog/page background is white with violet edges framing each page/blog (obviously behind)

body {
  background: #CCCCCC url(images/violet-fabric.gif);
  background: white;
}

I have tried to upload a plain white.gif to see if we can change the awful violet, but it is not changing. Can you help?

By: MisterNeutron

MisterNeutron — Mon, 13 Nov 2017 14:31:30 +0000

It might be worthwhile to point out that if your background image file name contains any spaces, you need to quote the URL. background: url("my dog.jpg")

By: anon

anon — Tue, 12 Sep 2017 04:06:29 +0000

In reply to Gaurav. That red with white line is svg.You can access it by inspecting and use it as it is.

By: Gaurav

Gaurav — Fri, 07 Jul 2017 12:50:46 +0000

How can I add a background same like the title? Red with white line trails!

By: subrata

subrata — Tue, 28 Mar 2017 00:25:07 +0000

This is a nice article …. and nice writing about background ….. so many many thanks to u

By: Jules

Jules — Thu, 09 Mar 2017 15:55:20 +0000

Is it possible at all to attach a data attribute to the html element (e.g. data-image) and then use that image as the background with CSS using something like attr(data-image)? I consider the choice of image as part of the content in my situation, but I can't get it show properly.

By: Vinay Raghu

Vinay Raghu — Fri, 06 Mar 2015 15:59:04 +0000

Background size alone needs a slash prefixed to it. Was wondering why my code wasn’t working. Popped over here to check. All good. Thanks!

By: Chris Coyier

Chris Coyier — Wed, 18 Feb 2015 00:34:23 +0000

In reply to Alex Bell.

Background-position is covered specifically here: https://css-tricks.com/almanac/properties/b/background-position/

By: Chris Coyier

Chris Coyier — Wed, 18 Feb 2015 00:33:25 +0000

In reply to Rhys. done!

By: youl

youl — Thu, 14 Aug 2014 02:43:07 +0000

OOOh TRY this :

body{
background: url(img.jpg) fixed;
-webkit-background-size: cover;
background-attachment: fixed;
}