Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

adding a second image to header to advertise a special event

Sara Nov 25, 2013 07:03PM PST

I currently have my logo as my custom header image in the top left corner. I don't want to move it.

I would like to add an image as a banner to the top right side to celebrate that one of my films won an award. I found this sample for adding additional images to the header, but i'm not sure where to paste it into my css. Please advise?

[ div style="position: absolute; top: 20px; left: 20px;"
img src="http://path-to-your-image.jpg" width="119" height="82" /
/div]

Also, I know that the above code is to enter text and to use an image that image needs to have a url associated with it. Can I use a cargo payload url to host that image?

Thank you!
Sara

Up 0 rated Down
Persona Admin Nov 29, 2013 03:20PM PST

Hello Sara,

The code that you pasted will allow you to put content anywhere on the page. It can be text, or image, or both inside. You can upload an image to any project, then click on the thumbnail for that image. It will take you the direct link for that image. Copy the URL and you can use that.

<div style="position: absolute; top: 20px; left: 20px;"> 
    This can be text, or an image: 
    <img src="http://path-to-your-image.jpg" width="119" height="82"/>
</div>
Up 0 rated Down
Sara Dec 02, 2013 10:15AM PST
thanks Cargo! Where in the CSS to I paste the code?
Up 0 rated Down
Sara Dec 02, 2013 10:21AM PST
Also, I just tried a test in my CSS (see code below) and clicked preview, but don't see anything.

/* To fix in place change to "position:fixed;" */
.header_img {
margin: 35px 0 0px 35px;
position: relative;
z-index: 11;
}
<div style="position: absolute; top: 20px; left: 40px;">
This can be text, or an image:
<img src="http://payload212.cargocollective.com/1/13/432089/6552476/santa-booth_o.jpg" width="119" height="82"/>
</div>


.nav_container {
line-height: 165%;
margin: 72px 0 -57px 35px;
padding: 0px;
position: relative;
z-index: 12;
}

And lastly if I want this image to link to something, is this the code I use?
<div class="header_img_custom">
<a href="http://www.sarabooth.com/OF-KITES-AND-BORDERS">
<img src="http://payload212.cargocollective.com/1/13/432089/6552476/santa-booth_o.jpg">
</a>
</div>
Up 0 rated Down
Andrew Admin Dec 02, 2013 05:17PM PST

Since that’s HTML code, you’ll need to place it in either the “contents & layout” area of a page or project ( to display only in that page or project), or inside your Custom HTML area ( to display across your entire website). The linking code you’ve added looks like it should work.

This topic has been closed.

tickets@cargocollective.com
http://assets2.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete