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>
Related
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>
as per my scenario i need to store this path /img/product.png of image in razor variable and later i want to use that razor variable in CSS file. below css code is in css file
.test{
background: url('/img/product.png') no-repeat scroll 0 0 transparent;
}
so i use code like this way below but no luck still
.test{
background: url('#Model.LogoUrl') no-repeat scroll 0 0 transparent;
}
i see this post http://www.codeproject.com/Articles/171695/Dynamic-CSS-using-Razor-Engine but i do not want to solve my issue as per the post. so let me know how to sort this issue. thanks
By default, MVC does not support writing server side codes in external CSS file and external Javascript files.
For your case to work, you can add an internal stylesheet in your view file itself, it will work.
Eg:
#{
ViewBag.Title = "Title";
}
<style>
.test {
background: url('#Model.LogoUrl') no-repeat scroll 0 0 transparent;
}
</style>
As far as I know, you cannot refer or write Razor code in a CSS file. CSS files are processed by the browser where as the Razor code is executed by the server and then rendered by the browser
For your problem, you will need to write an inline style
You can also do it in HTML part like this:
For example:
<div class="test" style="background: url(..#Model.LogoUrl) no-repeat scroll 0 0 transparent;">
...
</div>
i have little issue with repeating background image using bootstrap framework, but i'm quite beginner. I tried many ways already and nothing works.
Can u help me with that please ? I've tried for example that :
<style>
html, body {
background: url("img/bg-pattern.png") repeat;}
</style>
Your path is probably incorrect. As far as I can see, bootstrap has a different folder structure than what your code suggests. Try this:
body {
margin: 0;
background: url("../img/bg-pattern.png") repeat;
}
I'm unable to reproduce your issue on JSFiddle. For this reason I can only presume your image path is invalid.
In specifying img/bg-pattern.png, you're pointing to the bg-pattern.png file contained within the img folder contained within the same folder as your CSS. This assumes a folder structure of:
img
myHtml.html // Where your style element is included
Make sure your "img/bg-pattern.png" is present in the same folder where your file is present
else give the absolute path of the image.
Try using FireBug, maybe you'll see that the <body> tag is much smaller ( in height ) than you think.
I've moved my background: ... from the <body> tag to the actual <div> that contains the entire content ( which grow dynamically vs the <body> ) and the background is repeatable there ...
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-image: url('a.jpg');
}
.main:hover {
background-image: url('b.jpg');
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
When I load the page, my a.jpg didnt appear at all, hence no hover effect
Is it something wrong with my code?
http://jsfiddle.net/ZH9EL/6/
Nothing is wrong with your code. The first image is being redirected to the main website so you don't have an image being loaded. You will have to host it locally. I used a different image and it works.
No there is nothing wrong with your code, it could work, but I believe it is risky to use 2 images, if 1 is not loading it will not work...
You'd like to use two images but if hover image is taking to long to load or just not loading at all it will not work very well..
You might want to try Alois Mahdal's answer: https://stackoverflow.com/a/19967062/3217130 please read their reply..
Your css should be something like:
<style>
#main {
width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
background: url('a-b.jpg') no-repeat left top;
}
#main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
</style>
This will work and will load normal and hover at the same time so you wont face problems with dns or server delay and other problems that could make pages look ugly if images are not loaded...
Please try Alois Mahdal's answer, this will work for you, if you don't understand how to create this for your images (a-b.jpg and new smaller but better code) then I would like to tell you how to do this with your images and classes and the result you need.. I create sprites with Paint .NET or I use spriteme.org to optimize CSS on running websites you can copy new css and images if you're using spriteme.org they will be created on the fly. There are lot's of ways to create or edit images...
I hope my answer was helpful to you,
Happy coding
I am working on an app using Bootstrap as the framework in Rails (bootstrap-sass). What I want to do is add a sweet background image but I can't seem to override the white background of the body no matter what I try.
Has anyone had success with this? What do I have to change or add to get this to happen?
In addition to trying other things, I have even tried wrapping all the contents in the body in a div with an id, then calling that class in the custom css.scss file where I have successfully customized other aspects of Bootstrap.
The code I added using the id:
html body #bgimage {
background-image: image-url('/images/cityscape.jpg');
}
Edit:
I just checked the errors in the development local server and I have this: ActionController::RoutingError (No route matches [GET] "/assets/images/cityscape.jpg"):
/Edit
Thanks!
There was a similar discusion recently, the problem was that background-image oddly does not work with bootstrap. Try:
html body #bgimage {
background: url('cityscape.jpg');
}
Notice, that asset-pipeline does its work for finding the proper location of your file, so you don't have to mention the path.
If your cityscape.png is in assets/images/ directory, please use the following:
html body #bgimage {
background-image: url(image_path('cityscape.jpg'));
}
And to use your original source, you have to remove /images/ from your image-url as:
html body #bgimage {
background-image: image-url('cityscape.jpg');
}