Scenario:
Client would like only one site page to have its own background image in their SharePoint 2013 environment.
Issue:
I have done my research and have found a couple examples on how to link css files from the site assets to a content editor webpart, which according to others should render the image onto the background of the site page. When I try this method it returns nothing.
Furthermore I have tried to insert similar code onto a script editor refrencing the content editor's webpart ID with no luck either.
Question: I would like to accomplish this task without editing the masterpage and without changing the background image for the rest of the site collection. Has anyone ever done something like this before? Most of my research was hit and miss on who has actually succeded and who has not. I have included my code below.
<style type="text/css">
BODY
{
background-image:url("/SiteAssets/191208-M-AB981-1006.JPG") !important;
background-repeat:no-repeat;
BACKGROUND-COLOR: transparent !important;
}
.s4-ca {
BACKGROUND-COLOR: transparent !important;
}
.ms-alternating,.ms-gb,.ms-alternatingstrong {
background-color: transparent !important;
}
.ms-WPHeader {
background-color: transparent !important;
}
</style>
You could try to use the full picture url in CSS code to check whether the url is correct.
Here is my test result.
<style>
body{
background-image: url("http://sp:6912/testPictureLib/dowffnload.jpg")!important;
}
</style>
Hey I tried to make a page in Asp.Net Core and I want to put an image in the background but the way I tried wasn't very successfully.
<style>
.body {
background-image: url('..\pictures\mypicture.jpg');
}
</style>
Or when I tried to make a normal picture it didn't work either:
<img src="..\picture\mypicture.png"/>
first make sure your picture folder is in wwwroot and make sure you have
app.UseStaticFiles() in startup. ,after than, try this :
<img src="/picture/mypicture.png"/>
or
<style>
.body {
background-image: url('~/pictures/mypicture.jpg');
}
</style>
Within my cshtml view, i am having one div with
Id="top-navigation"
Css class defined as below in css
div#top-navigation
{
background:url('/Content/Images/bg-top-nav.jpg') 0 0 repeat-x;
height:37px;
border:1px solid #7bcdeb;
border-bottom:1px solid #7ad5f5;
}
My objective is to give as below
background:url('mysite.com/Content/Images/bg-top-nav.jpg')
but problem is, i dont want to hardcode mysite.com domain name.
what could be the solution? whether i can access server variable within css ?
Try using Dot Less CSS
http://www.dotlesscss.org/
and try declaring
#domain:'dynamic_domain_name' in your .cshtml page and use it. Here its like CSS defined in page.
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?
The site I work on has a lot of images that contain text. This includes buttons and navigation.
To support localization I include 2 css-files. One that has non language specific properties (font, colour ...) and one that has language specific properties. There is only 1 language specific file served to the user depending on his choosen language.
The language specific file (/content/en/Site.css , /content/de/Site.css ..) has information about background images
div.topHeader p#searchHeader
{
background: url(/images/de/headers/search_lo.gif) no-repeat scroll center center;
}
This works smoothly but I will have a lot of duplicate code. In english the css will be:
div.topHeader p#searchHeader
{
background: url(/images/en/headers/search_lo.gif) no-repeat scroll center center;
}
I will have a couple of languages thats why it would realy pay out to optimize this. Is there a better way to do this?
Just extract out only language specific part from the main CSS to a new CSS for each language and include that CSS in your page dynamically. In this way do don't have to manage lots of CSS classes.
You can try consolidating all external graphics references in separate CSS and referencing it separately in your code.
If you mean form paths in your CSS dynamically, well, you could write a handler to process this particular request for your CSS, read it on the server-side from the file, replacing all language marker parts as required (document.Replace("{lang}", "de")) and then serve the modified CSS back. But it would require some work.
Rather than having different CSS files for each language you could one file, site.css.aspx or similar and process the file, output the paths based on the language supplied POST/GET variables or in the accept headers.
See similar question here
For a start you could use background-image instead of background to save repeating the repeat, positioning, scrolling and colour information.
To really optimise it I would simply dynamically serve the css based on the user's localisation. eg: through a php script or something. You could just do something like background-image: url(/images/<?=$lang ?>/headers/search_lo.gif).
not sure but u can have something like this ,
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__en.gif) no-repeat scroll center center; }
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__de.gif) no-repeat scroll center center; }
where last word after __(dauble underscore) will added dynamically
as
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__{%lang%}.gif) no-repeat scroll center center; }
An easy solution would be to apply a class or ID to the body tag in the HTML based on their locale. Then in the stylesheet you could do something like:
div.topHeader p#searchHeader
{
background: no-repeat scroll center center;
}
body.en div.topHeader p#searchHeader
{
background-image: url(/images/en/headers/search_lo.gif);
}
body.de div.topHeader p#searchHeader
{
background-image: url(/images/de/headers/search_lo.gif);
}
There's still going to be a bit of duplication, but you've reduced the amount of CSS you have to write for each localisation.
You can create dynamic CSS with PHP or similar. Here's a PHP example:
index.html:
<link rel="stylesheet" type="text/css" media="screen" href="style.php">
style.php:
<?php
header("Content-type: text/css");
$lang = $_SESSION['however_you_are_detecting_lang'];
?>
body {
background-image:url(images/<?=$lang?>/image.png);
}
that will fetch images/en/image.png or images/de/image.png