Shop Mobile More Submit  Join Login

CSS Tricks: Background Images

Sun Jan 20, 2013, 7:06 AM
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
Add a Comment:
 
:iconalexisreitcher:
AlexisReitcher Featured By Owner Edited Jul 1, 2017  Hobbyist General Artist
I placed a background and this happened...
gyazo.com/e5af06622e87461eec8a…
The "general" is just a styled h2 tag, the other things are buttons.
Reply
:iconkuritails:
KuriTails Featured By Owner Jun 10, 2017  Hobbyist Digital Artist
Do I have to be premium?
Reply
:iconchaya-alynna:
Chaya-Alynna Featured By Owner May 20, 2017  Student General Artist
my image is in stash and i tried using this, but it won't show -@
Reply
:iconlunnika-horo:
Lunnika-Horo Featured By Owner Edited Aug 8, 2016   Photographer
Sorry, I just don`t know who I can asked, but I want to change the usual "DeviantArt green" into colorful skins in different widgets on my profile and don`t know how. Can you please help me? Or maybe you know tutorial about it?
Reply
:iconlunnika-horo:
Lunnika-Horo Featured By Owner Aug 8, 2016   Photographer
Oh I found your answer to other user with similar problem ^^ Thanks)
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 8, 2016  Professional Interface Designer
Alright, glad you found what you were looking for :)
Reply
:icondanksforthememeries:
DanksForTheMemeries Featured By Owner Jul 20, 2016  Hobbyist General Artist
I typed it exactly as you have it, but it's transparent for some reason???
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 20, 2016  Professional Interface Designer
If you typed it exactly, I am afraid I have to ask whether you replaced the incomplete example url I used with your image url? 
Reply
:icondanksforthememeries:
DanksForTheMemeries Featured By Owner Jul 20, 2016  Hobbyist General Artist
I did... My url was from sta.sh, does that affect it at all?
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 21, 2016  Professional Interface Designer
It shouldn't. If you have a link to the skin (in a sta.sh document for example), I could have a look at it and see what went wrong. :) 
Reply
:icondanksforthememeries:
DanksForTheMemeries Featured By Owner Jul 22, 2016  Hobbyist General Artist
By the time I got around to checking my replies, I fixed the problem. But now I have a new one: I submitted it, and it says it won't become installable until I upload all the images I used. I uploaded the one I used as the header, and it still won't work. Do you know why this is and how to fix it?
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 4, 2016  Professional Interface Designer
Mh, sometimes there is a bug if the name of the file is different than in the CSS. But other than that, it should work as soon as all images are added.
It does not ask for a second image? I know there used to be a bug, when a skin didn't contain any images, but if there is one, it should work. 
Reply
:iconchibifangirl01:
Chibifangirl01 Featured By Owner May 25, 2016  Hobbyist Writer
Hi there, I tried following your tutorial but I'm not sure what I'm doing wrong. Screen Shot 2016-05-25 at 12.04.12 PM by Chibifangirl01
Reply
:iconpica-ae:
pica-ae Featured By Owner May 26, 2016  Professional Interface Designer
Oh, it does not work on profile widgets. This is only for journal skins. 
If you want to edit the appearance of your profile page, you should check out CustomizeYourProfile. They have lots of tutorials and code for that :) 
Reply
:iconcatsins:
catsins Featured By Owner Mar 12, 2016  Student Digital Artist
i tried to make the journal background fixed and it won't show up?? where do i put "position: fixed;" ?? please help
Reply
:iconcatsins:
catsins Featured By Owner Oct 31, 2015  Student Digital Artist
I saw someone with a really cool journal skin, it had a fixed background (when scrolling, the image stays still while the content moves with the scrolling) and I was wondering how they did it? I'm not a core member but it would be cool to know c:
Reply
:iconpica-ae:
pica-ae Featured By Owner May 3, 2016  Professional Interface Designer
They have probably used a fixed position for the image, you can read up a bit here developer.mozilla.org/en-US/do… or see how others coded it here codepen.io/search/pens?q=fixed…
Reply
:iconcatsins:
catsins Featured By Owner May 3, 2016  Student Digital Artist
Ty!!
Reply
:iconpica-ae:
pica-ae Featured By Owner May 4, 2016  Professional Interface Designer
No problem :)
Reply
:iconcatsins:
catsins Featured By Owner Oct 31, 2015  Student Digital Artist
Nevermind, I figured it out ;u;
Reply
:iconsecretagentsuperstar:
SecretAgentSuperstar Featured By Owner Aug 17, 2015  Professional Digital Artist
This guide was really helpful in how to insert and manipulate how images appear. The only issue I have is the position of the background image whenever it differs from how it looks in other pages. For instance, When I view the journal itself it looks like it's in the right position (Left/fixed). When I visit my profile, it looks like it is in the same position all the time no matter where I view it; Do you know how to fix this issue with a code? :/
Reply
:iconpica-ae:
pica-ae Featured By Owner May 3, 2016  Professional Interface Designer
I am not sure about the problems with a fixed position, you may need to try using static instead. You can read up on it here developer.mozilla.org/en-US/do…
The problem may be, that it always refers the position to the whole browser, not the journal. So it can look different depending on where the journal is posted, like your profile, because it positions the background considering the whole page. 
Reply
:iconsilvsid:
silvsid Featured By Owner Jul 15, 2015
im sorry, but im just so confused. can someone please help me with this? Im so confused on where to put the image url and if i need to put other links and whatnot
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 29, 2015  Professional Interface Designer
Sorry for the late reply, I was in a mix of busy and sick lately.
The code for the background images would go in the CSS. You need to define which class should have a background image (for all the classes on DA you can use CSS Tricks: Skin Template)
I am afraid this tutorial is not for beginners, it requires a basic knowledge of CSS. I have not written a basic tutorial myself yet, so unfortunately I cannot link you to anything.
Reply
:iconsilvsid:
silvsid Featured By Owner Jul 30, 2015
I understand, thank you for taking time out of your day to reply for me. I'll try to catch up on CSS tricks, but its a lovely tutorial.
Reply
:iconpica-ae:
pica-ae Featured By Owner Aug 1, 2015  Professional Interface Designer
Alright :) 
Reply
:iconnyssa-tan:
Nyssa-tan Featured By Owner Jun 10, 2015  Professional General Artist
Thank you very much for making and posting/sharing this! This will certainly be helpful to me in the future~
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 8, 2015  Professional Interface Designer
I am glad it is helpful :) :hug: 
Reply
:icontanblaque:
TANblaque Featured By Owner May 5, 2015  Hobbyist Digital Artist
:bulletpink: Hello~ I really wonder how to put an image beside a text at the custom box.
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 8, 2015  Professional Interface Designer
You may find an answer in this comment thread comments.deviantart.com/1/3478…

Or, use the tutorial Vane--Chan suggested :) 

I hope you can figure it out :la: 
Reply
:icontanblaque:
TANblaque Featured By Owner Jan 6, 2016  Hobbyist Digital Artist
:bulletpink: Thank you so much!~!
Reply
:iconle-vane:
Le-Vane Featured By Owner May 18, 2015  Hobbyist General Artist
Hiya! Don't mind me stalking the comments, but I had the same problem for a while.
Maybe this'll help you? CustomBox Columns tutorial
Reply
:icontanblaque:
TANblaque Featured By Owner May 21, 2015  Hobbyist Digital Artist
:bulletpink: Goodness! THANK you~!
Reply
:iconle-vane:
Le-Vane Featured By Owner May 21, 2015  Hobbyist General Artist
You're very welcome! ^^
Reply
:iconthe-art-rat:
The-Art-Rat Featured By Owner Apr 18, 2015
Where exactly do you put the image thing in the code?
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 18, 2015  Professional Interface Designer
Well, you can put it into any class in your CSS, either those provided by DA or custom ones you create yourself. You can add the CSS in the "Edit Skin" field in stash writer, for the CSS itself, the exact placement is not that important as long as you don't double some styling. CSS is read from top to bottom by the browser, so if you want to be save, place it at the end of the CSS ;) 
If you need to know more about DA's classes, they are described here CSS Tricks: Journal break-down :)
Reply
:iconsparkanine:
Sparkanine Featured By Owner Apr 14, 2015
How about adding links to the skin itself like what you have at the bottom of the skin above? I would like to add links to the bottom of my skin as well for my group page Souls-Of-The-Cosmos Any ideas or ways you can help? :3
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 15, 2015  Professional Interface Designer
I always place links like that in the footer section of the skin editor in stash writer. They are going to be part of the skin, just like the header would be. Those two sections are for HTML that is supposed to be in the skin by default. 
You can style those links any way you want, I've created a background color with more padding, so that not only the text is clickable and you can place them pretty much where you want in the layout. 
Reply
:iconsugarcandies:
SugarCandies Featured By Owner Mar 6, 2015  Hobbyist Digital Artist
I can't figure out the <blockqoute> coding Q^Q
It shows up, but I cant put anything in it. 
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 9, 2015  Professional Interface Designer
I am not sure what you mean exactly. You write the code for a blockquote styling and that styling does not show up? Or the styling shows up and you can't put words into it? 

If you're working in sta.sh writer, you may want to switch to HTML mode.
If in rich text editing, you write the text first, select it and use the buttons to make it a blockquote.
Untitled Drawing by pica-ae   

And sometimes the issue is as simple as spelling. I keep mistyping : for ; all the time :slow:
Reply
:iconsugarcandies:
SugarCandies Featured By Owner Mar 9, 2015  Hobbyist Digital Artist
THANK YOU SO MUCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
IT WAS SO SIMPLEEEEEEEE 
Reply
:iconthebrassglass:
TheBrassGlass Featured By Owner Feb 15, 2015  Professional General Artist
This is so helpful, thank you! I was wondering if you know how to make the journal box (and header image) stretch with browser size?
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 15, 2015  Professional Interface Designer
I am glad it does help :)

Unless specified with a set width or max-width, the journal box does always stretch with the browser. For an image that does not repeat itself to always fill the width of the browser, you would have to set the background-size property to cover, as described here developer.mozilla.org/en-US/do…
Reply
:iconlizru:
lizru Featured By Owner Jan 11, 2015  Hobbyist General Artist
Any idea as to how to add a static image over a scrolling header? Simply put, i want to add an image that will scroll up with the rest of the journal while the background stays in one place.
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 11, 2015  Professional Interface Designer
You need to add postion: fixed; to the element with the background image that is supposed to stay in place. Everything scrolls along with the content by default, so you only need to apply one line of code to the element that is supposed to stay :)
Reply
:iconlizru:
lizru Featured By Owner Jan 12, 2015  Hobbyist General Artist
 ok but i can't fgure out how to get my image on top since the journal only wants to show one or the other
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 13, 2015  Professional Interface Designer
What classes are you applying the image to? There are some classes that conflict on journal skins, and you can only have an image in one of them. Like .gr-top and .gr-top .gr where only either of them can contain an image. 
Reply
:iconlizru:
lizru Featured By Owner Jan 13, 2015  Hobbyist General Artist
I was using .journaltop
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 14, 2015  Professional Interface Designer
Oh, the old classes. Well, that doesn't matter, on DA CSS only allows one background image per class. So it will not work at all or only use the last time you enter it. 
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae



Featured in Collections

coding stuff by s-alvatore


More from DeviantArt



Details

Submitted on
January 20, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
31,261 (3 today)
Favourites
414 (who?)
Comments
122
×