To solve the problem of changing the relative path of the background image url in css,

To solve the problem of changing the relative path of the background image url in css,

Recently, I want to upload Banner wallpapers on the homepage of my website at any time. The problem is: dynamically Add the uploaded image path to the css code on the homepage. The result is a try of the idea provided on the Internet. Change the relative path to ".. /.. /Content/"and". /Content/", but the actual operation does not enable the newly uploaded image path to be loaded into the css code. Some css codes on the homepage are pasted:

 

 1 /*--banner--*/ 2         .banner { 3             background:url(../images/banner-1.jpg) no-repeat 0px 0px;             4             background-size: cover; 5             -webkit-background-size: cover; 6             -o-background-size: cover; 7             -ms-background-size: cover; 8             -moz-background-size: cover; 9             min-height: 600px;10         }

Html post on the home page:

1 <div class = "banner"> 2 <div class = "container"> 3 
The previous idea was to get the uploaded image path, save it in the mysql database, write a page, read the path in the page, and then set the background in css: url (.. /images/banner-1.jpg) no-repeat 0px 0px; changed to a field value;
The implementation of field assignment is as follows:
1 @using TheOne.Models2 @using TheOne.MySqlAccess3 @{4     SystemServiceAccess ssAccess = new SystemServiceAccess();5     String BannerPicUrl = ssAccess.GetBannerPic();     6 }
BannerPicUrl is added to background: url (../@ BannerPicUrl) no-repeat 0px 0px;
After a long time, the relative path failed to achieve the effect, so I came up with another implementation idea: Can I keep css as it is, however, you only need to replace and rename the images imported by css in the file system. Fortunately, asp.net has powerful file operations! So I started to write the implementation code again.
This is the core function, which includes the following notes:
1 [HttpPost] 2 public ActionResult AddBannerPic (HttpPostedFileBase file) 3 {4 // upload the article cover image 5 try 6 {7 if (file! = Null & file. ContentLength> 0) 8 {9 // Add the suffix .jpg 10 string DeletePath = System. IO. Path. Combine (Server. MapPath ("~ /Content/FrontEnd/images ")," Banner-1.jpg "); 11 try12 {13 System. IO. file. delete (DeletePath); // Delete the image 14} 15 catch (Exception f) 16 {17 18 throw f; 19} 20 21 // rename the uploaded image name 22 string NewBannerPicName = "Banner-1.jpg"; // specify the new file name 23 string Path = System. IO. path. combine (Server. mapPath ("~ /Content/FrontEnd/images "), NewBannerPicName); // update the Banner-1 image 24 file directory in the front-end Content folder. saveAs (Path); // save to New Path 25} 26} 27 catch (Exception e) 28 {29 throw e; 30}
31 32 return View ("Index"); 33}
 
In this way, when I refresh the home page, I can see the image I just uploaded. In this way, I didn't use database storage or change the relative path of css. I only need to use file operations (System. IO ).
Project demo address: http://www.libertas.ren/