literature

CSS Tricks: Background Images

Deviation Actions

pica-ae's avatar
By
Published:
52K Views

Literature Text

Today's CSS Trick will be about using background images in Journal Skins.

There are three types of images that are mostly used in journals skins: big background images, seamlessly repeatable patterns and icon/logo-like images.

Images can be used for all elements of a journal: in the header, footer, behind text, next to text etc.. Any journal element has the ability to contain an image

I cannot stress enough that the main objective of a journal is making written content enjoyable to read. It is all about readability and making it as easy for the reader as possible. Very often I come across pretty journal skins, that have a complete lack of readability. In one of my previous CSS Tricks I already mentioned the dangers of text lengths and how to limit the .text width to improve readability.


Problems with using images:

  • Despite being big an images turns out to be too small for a journal
  • An image does not repeat seamlessly
  • Text becomes non-readable on an image
  • Too big images slow down the loading time of a page

Let's look at how to add images first!


.gr-box {

background: url("http://…/pattern.png");


}


If you add an image just like this, it will automatically be repeated into all directions, starting from the top left corner of the element the background image is contained in. (While I am well aware of the fact that the image I choose for these examples is actually quite bad :lol: )

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


But you have more options to control images


You can control the position of an image, where it is poisitioned, whether or not it repeats and how it repeats and how it behaves.

.gr-box {

background-color: #bde6d8 ;


background-image: url("http://…/pattern.png");


background-position: center;


background-repeat: no-repeat;


background-attachment: scroll;


}


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam


You can also write this all onto the background element only. Which way you choose to write this, is up to you. For beginners, writing it all out, keeps the code easier to view and mistakes easier to detect. The more familiar you become with CSS, the more likely you are going to write everything in one line.

.gr-box {

background: #bde6d8 url("http://…/pattern.png") center no-repeat scroll;


}


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


What do those attributes stand for?

  • background-image is the easiest to understand, this one adds an image into the element.
  • background-position describes where, in dependency of the while element. top aligns to the top of the element, right to the right, left and bottom accordingly. center positions the image in the middle of the element. You can also use % and px data to align an image.
  • background-repeat controls how an image will be repeated. Not entering this line will automatically repeat your image into all directions; (leaving this out also makes background-position redundant). no-repeat stops this and makes the image appear only once in your element. repeat-x limits the repetition to the horizontal axis, repeat-y to the vertical.
  • background-attachment describes how the background image behaves upon scrolling the page. scroll is the normal behaviour of an image aka it will stay within its element and move along with that element; fixed will make the image stay at its same spot, despite its containing element moving upon scrolling.

Practical examples


In the first one we will have one image being one time centered at the top of an custom box. The image will be 20px from the top edge of the box; (a box's padding does not influence background images). Additionally the box needs padding at the top that in order for the text not to be above the image and by that impossible to read; the number 90px results from the images height (50px) + the 20px position from the top edge + 20px for where the text starts.

.welcome-box {

background: #EFE7E1 url("http://…/welcome.png") no-repeat;


background-postion: center 20px;


max-width: 400px;


margin: auto;


padding: 90px 20px 20px 20px;


}


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


You could also add a background image to headlines. This requires a non-repeating image, with additional padding for the text not to run over the image. The center value in combination with left will place the image at the left side of the headline, but centered vertically.

.h1 {

color: #332115;


background: url("http://…/welcome.png") center left no-repeat;


font-family: 'Alegreya', Georgia, Serif;


padding: 0 0 0 30px;


}


Lorem ipsum dolor sit amet


Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.


Why I don't like to use <img src="…" />


Using CSS to control the appearance of elements in a journal keep your HTML cleaner and more structured. This helps a lot when you need to edit something you have written. If you need to replace an image, it is often easier to find the URL in the CSS file, rather than the HTML.
This is even easier when you have the same image in more than one spot; instead of fixing each link, using background-image let's you use the same class more than once, but you only need to fix the image URL once.
Generally it is "good practice" to put as much information as possible into CSS files instead of HTML files. You may have to create more div classes, but you gain a better HTML result.

Best and Worst practice


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
:thumbsdown:
The text becomes almost impossible to read on this image. It is very busy and varies between bright and dark parts, which makes it hard to find a good color for the font.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
:thumbsdown:
Again the text becomes almost impossible to read on this pattern. It is very busy, with many colors and makes it hard to not only read, but also look at the text. Not even mentioning finding a good color for the font…
This is a standard Photoshop pattern and you can actually see that it does not repeat seamless.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
:thumbsdown:
This image of a gradient is not big enough to fill the whole box; a hard edge appears where it ends. But at least in this case, the text is good and easy to read.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
:thumbsup:
Stock images of textures, like dark and grainy I texture pack by northerndawn, add a nice touch to the background of the box, while it maintains readability. If you have an image editing program, you can colorize or adjust textures more to your liking. Having only one hue and brightness in the image also makes it easier to find a good text color.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
:thumbsup:
Subtle and seamless patterns, as f.e. provided by Subtle Patterns, keep text readable and add a nice subtle touch to an element.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
:thumbsup:
This gradient blends nicely into the background color of the element. It is not as bright as to disturb readability, but it adds a subtle effect to the box.


A short excurse to image file types

  • .JPG
    Good for busy images, good control over file size, risk of artefacts
  • .GIF
    Images with few colors, bad for gradients, limited transparencies, good control over file size
  • .PNG
    Good transparencies, little control over file size, no artefacts


In a nutshell

  • Pay attention to readability in your background-image choices, keep it subtle
  • Use seamlessly repeatable patterns
  • Prepare images in proper size
  • Use the best possible file type for your images
  • Control images via CSS, not via HTML


And now? Happy coding :la: :heart: :peace:

And if you're looking for images… here's some help ;)

Helpful Resources


Pattern Resources
:bulletgreen:Resources & Stock Images > Application Resources >Photoshop Patterns
:bulletgreen:Search for "Seamless Patterns" in Resources & Stock Images
:bulletgreen:Subtle Patterns | Free textures for your next web project
:bulletgreen:pattern8 | Download Free Repeat Patterns

Online Pattern Creators
:bulletgreen: Seamless Lite - Seamless Pattern Design by COLOURlovers
:bulletgreen: BgPatterns — Background Patterns Maker
:bulletgreen: Tartan Designer - Tartan Maker - Tartan Background pattern generator
:bulletgreen: Patternify | A CSS Pattern Generator

Tutorials and Resources for creating seamless Patterns
:bulletgreen: Seamless Patterns and How to Use Them With CSS by fantasy-alive
:bulletgreen: Seamless Textures in Photoshop by redheadstock
:bulletgreen: Repeating Pattern Tutoriall by Cpresti
:bulletgreen: Repeating Pattern Tutorial by PeriwinklePaisley
:bulletgreen: Simple Snowy Seamless Pattern Tutorial by ChewedKandi
:bulletgreen: Seamless Pattern Tutorial by ceanji
:bulletgreen: Free Action Pattern Generator by Giallo86

Textures
:bulletgreen: Browse Textures on deviantART
:bulletgreen: Mayang's Free Texture Library
:bulletgreen: Free Textures from TextureKing
:bulletgreen: [CG Textures] - Textures for 3D, graphic design and Photoshop!
:bulletgreen: Plaintextures - free high resolution textures for professionals.

:lightbulb: Please pay attention to the Terms of Use of the provider! On dA just as well as from other sites. Not every site out there uses legitimate sources.

Have a suggestion?


Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.

A few words about using background images in CSS/HTML and Journal Skins :)

Hope you like it :heart: :peace:

More CSS Tutorials:

CSS Tricks: Limiting .text widthHello!
Today I wanted to share a little CSS Trick with you :la: Many other people have done this before, awesome people like Ikue, thespook or ginkgografix, and now it's me too :giggle:
This first trick is very simple in execution, but I want to spend some time explaining why you should do it. That's why this journal has become a bit long :lol:
All about improving Readability!
When it comes to designing long copy texts, there are quite some challenges in order to create something easy to read and enjoyable to look at. One of the issues that may occur is text, that is running too long. The longer a line of text gets, the hard it is for the reader to follow the flow of text.
In some case you may have to even move your head from the beginning of a line to its end. And once you move your head, it becomes a lot harder to find the next line of text.
You may not even notice this while reading. But you will notice that your eyes get tired and you may even get a
CSS Tricks: Responsive dA?If you are at least slightly into web design and/or using mobile devices to browse, you should have come across the term "Responsive Webdesign". Basically it means that a website is set up in a way so it gives the best browsing experience no matter on what device you are viewing it.
One term that is often mentioned along with it are "Fluid Designs". This usually refers to web sites that use % instead of px values to define sizes inside the layout.
This necessary trend in web design made me think about the deviantART.com layout. Because it is a design that has been working responsive for several years! You can test this by going to any place on dA and changing your browser window. You will notice how the ratio of all elements in width remains the same no matter how wide the browser window.
Now that we know that dA is responsive, we will soon find out that there is a responsive element inside dA, which reacts in first instance to the page on dA you are and in second instance to the brows





Follow me on 
Twitter Twitter  Heart Dribbble  Camera Instagram  St. Patricks Day! Creative Market  Horns  Society6  Bomb Threadless
© 2013 - 2022 pica-ae
Comments130
Join the community to add your comment. Already a deviant? Log In
Branka-Artz's avatar
Thanks for the awesome info. I'm still new at CSS coding and would
really love it if I can "one day" create my own journal skin :faint:
So, I suck up every bit of info about CSS I can lay my hands on :D