Set background image in asp.net core mvc - css

I have created a folder inside wwwroot, called Media. I'm trying to set a background image with css like this:
<body style='background-image: url("~/Media/background.png")'>
But the background does not appear.
However, if I try to put is as a image it works:
<img src="~/Media/background.png" />
So, how do I handle background images?

Try the following:
<body style="background-image: url(../Media/background.png)">

Maybe: try to use url of image instead of relative path.
In That case I suppose `https://yourdomain/media/background.png' could do the trick.

Related

Add data-aos inside a tag using css

I am using Drupal 7. I want to animate the login block with aos.
The login block is called "block-user-login". It´s a <div id="block-user-login" ... >
Can I create some css code around to make "data-aos='zoom-in'" be associated to that #block-user-login ?
How can I create a style script to do that?
I dunno if you're still in doubt bout that. But you can try <div id="block-user-login" data-aos = 'zoom-in'> and after that you can config in css the color, the font and everything else.

ODOO - Add image field as background in CSS

Here's the issue, I want to pickup an image from my backend website.image_url(employee,'image_medium' )
It works when I use it with <img t-att-src="website.image_url(employee,'image_medium' )" />
But as soon as I try to use as CSS attibute, it doesn't work. How can I solve the issue?
<div style="background-image: url("website.image_url(employee, 'image_medium')");">
Try this:
<div style="background-image: url('"website.image_url(employee, 'image_medium')"');">
The single quotes withing you call to get the image I think are what is breaking the css as it thinks the first is ending the url.
url also doesn't actually need single quotes, so you can also try:
<div style="background-image: url("website.image_url(employee, 'image_medium')");">

rails - How to show an image as background in a style tag?

I am currently developing a rails application. I am trying to show an image on background in html.erb file yet I cannot do this. I use following up code:
<header class="intro-header" style="background-image: <%= asset_path('home-bg.jpg') %>">
What's the mistake I did? Can anyone explain this?
Thanks,
Bartu
Make sure to wrap your background image in a url:
style="background-image: url(<%= asset_path('home-bg.jpg') %>)"
Links to background images must be wrapped in url(), otherwise your browser will not know where to go to get the image.
You forgot to put the url declaration in your background-image property. It should look like
<header class="intro-header" style="background-image: url(<%= asset_path('home-bg.jpg') %>)">
Otherwise, you're just including a raw url as the property.

How do you reduce this image size?

I'm currently using DYI app builder platform and they have a <>source code page. So I put in
<img src="URL.png"/>
And it worked! But when I tried to shrink the image (original image is width=256 height 256)
<img src="URL.png" Width="100" Height="100"/>
Nothing happens to the size of the image.
So I tried
<div style="width:100px;height:100px;overflow:hidden;" >
<img src="URL.png" width="100px" height="auto">
</div>
Which I picked up on StackOverflow.. But it doesn't work.
Please help. BTW I have no knowledge of coding so please do not skip a step assuming I would know it.
(When I apply the code and go back to the source code page width and height disappeared from the source code page except the bare bone Img src="URL")
Something in your program is overriding it or disabling it (filtering it away). If it is another css rule that is overriding your css, then you could try:
width:100px !important;height:100px !important;
if this doesn't work then apparently the css gets filtered out, you might check the program's settings if this behavior can be changed
Try to save the page, in the DYI app builder you're using.

html image path incorrect

I'm somewhat perplexed by this.
..
The page im working on is located in
www.gd-gaming.com/wordpress/
However, for the background image to show, instead of putting it in
www.gd-gaming.com/wordpress/images
I've had to put it in
www.gd-gaming.com/images
Now, When I visit an additional page from the one im working on, (www.gd-gaming.com/wordpress/breakout-canidates/)
That background image dissapears. I cant understand why, I use the same code on a vbulletin website and the background displays everywhere. If I firebug it, it tells me the image didnt load, meaning the path is incorrect. I'm not sure where to put it though.
For actual reference..
http://www.gd-gaming.com/wordpress
http://www.gd-gaming.com/wordpress/breakout-canidates/
Code: <div id="background">
<img class="background" src="images/bgmain.jpg">
</div>
use absolute:
<div id="background"> <img class="background" src="/images/bgmain.jpg"> </div>
instead of relative one

Resources