Need help with getting an image to show in css

kodarr
kodarr

I've been trying several things even code snippets from the forums but nothing seems to work.  Right now I'm playing around with trying to replace the white box on my front page with an image of parchment.

Here is the code I tried

input[name="description"] {

 background-image:url("https://db4sgowjqfwig.cloudfront.net/campaigns/146844/assets/644067/Parchment.png?1474698791";);

}

Obsidian portal did not like the this and deleted it all.  Instead of using the input command I've tried both .description & #description as well to see if name acts as an id or class instead.  I've never worked with the name attribute as I only really deal with HTML5 and CSS3.  So any help to get either thing on here to work would be great.  I just need some code that works on my site.  Since the code I find other people use for adding or tweaking images doesn't work for me.  i did manage to tweak my character page with some code I found but again the images did not work so I deleted the code since it didn't fully work for me.

I've tried 

.op-icon-book-wiki::before {   content:url("https://db4sgowjqfwig.cloudfront.net/campaigns/116780/assets/640266/Tree.png";); }

I saw in the forums one guy used to replace the icon next to wiki with the imaged link.  It saves on my css area but doesn't show any changes when I view my site.

Any help is greatly appriciated.  

Thank you.

Comments

  • cgregory
    cgregory
    Posts: 780

    Never use the word description. Anything with the word script in it gets deleted.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780 edited September 2016

    As for the content:url

     

    .op-icon-book-wiki::before {

        content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640320/XFront.png);

    }

    no quotes are needed around the url and no ; after the url

    See above for the differences between mine and yours.
    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • kodarr
    kodarr
    Posts: 6

    This is the html line of where I would like to put the background image of parchment behind. 

    <meta content="&lt;p&gt;The story starts Spring of 692.&lt;/p&gt;" name="description" />

    I was trying to apply the background image to the name field, but since we can't use "description", and if I apply it to every meta it will be a mess, how can I go about getting the background image on there.

    Also do I still use

    background-image:url("link to image");

    Also the second code I tried in the initial post I don't see why the image does not show.

  • cgregory
    cgregory
    Posts: 780

    You put "quotes" around the url. You don't need them for content:url also you dont need that ; after the quotes of the url.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780

    Basileus shows how he does a parchment effect in this thread

    https://forums.obsidianportal.com/discussion/4134/css-shenanigans/p1

    You can see the end result here

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • kodarr
    kodarr
    Posts: 6 edited September 2016

    Maybe I'm doing this wrong.

    I took the following code and pasted it into the Custom CSS area of my obsidian portal.

     

    @/* IMAGE STYLING */

    .main-content img {filter: sepia(15%) opacity(85%); transition: all 0.3s ease-in-out;}

    .main-content a img:hover {filter: sepia(0%) opacity(100%); transition: all 0.3s ease-in-out;}@

    @

    /* PARCHMENT BACKGROUND WITH STYLED BORDERS */

    .campaign-public-layout .main-content {background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/360428/parchment-background-03.jpg?1408555806';); background-repeat: repeat-y; background-size: 100%; box-shadow: 0em 0em 1em 0em black; border-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545582/page_border.png?1452575364';) 146 143 135 123 round; border-image-width: auto; border-image-outset: 22px;}@

     

    Clicked Save it did not remove it said page updated looking around my page there were no changes at all.  Nothing different is showing up.  Is this the right place to put it?  Or do I need to attach it as inline css on a tag in my main page?

    This is directly copied from the post about it to see if it works or not on my page

    Post edited by kodarr on
  • cgregory
    cgregory
    Posts: 780

    You need to make the background color transparent i believe.

    .adventure-log-show .post-header-container {background-color:transparent;}

    .adventure-log-index .adventure-log-post  {background-color:transparent;}

         

    .campaign-public-layout .main-content {background-color:transparent; background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/360428/parchment-background-03.jpg?1408555806';); background-repeat: repeat-y; background-size: 100%; box-shadow: 0em 0em 1em 0em black; border-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545582/page_border.png?1452575364';) 146 143 135 123 round; border-image-width: auto; border-image-outset: 22px;}

    body.campaign-public-layout .post-section.post-main {background-color:transparent;}

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • kodarr
    kodarr
    Posts: 6

    ok the adventure-log-show works for the adventure log however I don't see that tag in the source for the page so not sure what the list of tags are that are for each page.  I found a work around for the front page but there is probably a better tag to use.  However I can't get rid of the white box on the wiki page.

    for the front page i'm using .campaign-landing-page-container.  

    Is there a list anywhere of similar tags so i can hide the background on each of the pages to show the background image?

    So I have this now

    /* Front Page background */

    .campaign-landing-page-container{background-image:url('https://db4sgowjqfwig.cloudfront.net/campaigns/146844/assets/644220/parchment-background-03.jpg?1474744046';);background-repeat: repeat-y; background-size: 100%; box-shadow: 0em 0em 1em 0em black; border-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545582/page_border.png?1452575364';) 146 143 135 123 round; border-image-width: auto; border-image-outset: 22px;}

    .post-header-container {background-color:transparent;}

    .adventure-log-index .adventure-log-post  {background-color:transparent;}

     

     

  • kodarr
    kodarr
    Posts: 6

    Thanks cgregory.  You answered my initial question.  I'm looking around for answers to other ones that it brings up.

  • cgregory
    cgregory
    Posts: 780

    The best way I find to figure out what elements you need to target is to use firefox with firebug installed. After activating firebug, you can then use the click element to figure out exactly which elements you need and you can even temporarily change the css to see what those changes will do.

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions