I am trying to put background image in my store.
I edit global.css file I set Performance Force Compilation = true and cache =no.
I change color of body
I put background image
like below
body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#555;
background:#555 url('../img/flowerbg114.gif')repeat
background-size: contain
}
But nothing changes in my front office :(
My img file is under img folder under the selected theme..
Thank you for your time :)
try below CSS
body {
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#555;
background:url(../img/flowerbg114.gif) #555 repeat;
background-size: contain;
}
After each line you end, or each css property you complete, place ; .
Check it and it will be working fine now.
Thank you
The problem was the theme I was using was probably overriding some of the style changes. I found out that it has a module which helps to set some properties like background picture or store logo. When I use the user interface of that module I managed to change the background easily.
I suggest that you edit header.tpl and change line 40
after {$HOOK_HEADER} </head>
from:
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
to:
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} style="background:url({$img_dir}page/background{math equation='rand(1, 6)'}.png) repeat-x top center">
This should select a random number between 1 and then load the background image with that number in the filename. Just create background1.png, background2.png, etc.
Note: will override the body tag in global.css.
Make a file name of a page, and then put the pictures inside
Annexation place the file in img Directory
Related
I try everything on this and other forum to do it and not ask people..
But nothing happened! haha
I would like to know if someone here know how to change the background colors on Henson template on Squarespace ? (So also all the texte of the page).
I try this in the CSS section but it didn't worked.
#collection-5e827250f835166c09c3dcbe
{background-image:url("https://static1.squarespace.com/static/5c3a93e22487fd34bb34eaa9/t/5ea1dd8bda93e023950c5bcf/1587666340724/Background.jpg");
background-size:cover;
background-position:center;
}
And i try this in the injection code :
<style>
#collection-5e827250f835166c09c3dcbe {
background-color:#000;
}
</style>
Thank you in advance,
hope someone can help me!
The Henson template has a "title-card-overlay" that, if enabled, makes it non-obvious to change the initial background color of a the page.
To change the background color of a specific page, add the following CSS via the CSS Editor/Custom CSS:
#collection-57ae1156e3df28c4ce90ea48 .main-content {
background-color: #000000;
}
#collection-57ae1156e3df28c4ce90ea48 .title-card-overlay {
background-color: #000000;
}
Of course, in the above code, change the collection ID 57ae1156e3df28c4ce90ea48 to the ID of the page in question.
I've made simple application with dojo.
I took the exact same combo tree (cbtree) and put it once inside accordion and once first on page.
I don't understand why inside the accordion I get different cbTree (it looks really bad)
Here is online example of the problem :
http://77.235.53.170/cbTree/cbTree.htm
The problem is at your main.css, you have
#leftCol img {
width: 100%;
}
Which overwrites
.dijitFolderOpened, .dijitIconFolderOpen, .dijitIconError {
background-image: url("../../icons/images/commonIconsObjActEnabled.png");
width: 16px;
height: 16px;
}
You need resolve this in main.css by either removing your style, or changing it to a more specific rule; i.e. instead of #leftCol img, use #leftCol .yourClass.
I'm trying to set the background image of my Windows 8 app. In the CSS for the page I did:
body {
background-image: url("images/logo.png");
background-color: #00522c;
}
The background color works but the images does not.
Assuming you're using what the default template generates, you have a pathing issue (the images directory is not at the same level in the folder hierarchy as the css file)
Try
background-image: url("/images/logo.png");
or if you want to be really explicit:
background-image: url("ms-appx:///images/logo.png");
I was trying to add twitter/facebook icon to the site footer, much like side.cr footer. I got everything working, except that safari having unexpected vertical tile for twitter and facebook. I tried to upload screenshot but I am new user, so can't do that right now.
So I was searching for the answer and found this q/a here, Is <img> element block level or inline level?
So I went to side.cr again to see its css does have user agent stylesheet.
I added this line of code to my css:
.footer ul li img.t, li img.f {
width: 40px;
vertical-align: middle;
display: inline-block;
}
and it fixed the problem.
But I have a few questions in head:
why does side.cr's css show as non-editable user agent, while I have to add that display-inline to my css?
How does "display: inline-block" fix the problem?
Notice that: When mouse over to the gray twitter, it triggers swap.js, changing the icon image to the colored one, but in safari, the highlighted icon is bigger than the gray one. I think i almost know the answer. Just need someone who knows all the kinks behind this.
Thanks!
Solution:
To fix this problem make sure you set the height and width on the image so that it doesn't change during loading.
<img src="http://www.side.cr/images/contact/twitter_off.svg"
class="twitter_bird img_swap" height="52px" width="52px" />
or
.twitter_bird {
height:50px;
width:50px
}
Explanation:
When you switch the images name, safari begins to load the image but it doesn't know the height or width until it's done downloading. If you set the height and width it will not grow from 0px to 52px.
I have a simple question. I want to style the header bar in jQuery mobile. Specifically I want to set the height of the bar and add a background image to it. How can I do that?
Thank you in advance
This is how I handled it. Instead of actually putting an H1 inside the data-role="header", just directly insert a
<div class="ui-title"></div>
and then add something like this to your custom CSS.
.ui-header .ui-title{
margin: 0.3em 70px 0.7em 10px;
background-image:url(../images/logo-page.png);
background-repeat:no-repeat;
background-position:0 0px;
width:178px;
height:40px;
}