Asp.net core setting background in <form>

Question

Hey guys we're learning with a friend how to code and we've just moved into front-end from back-end stuff. At the very beginning we faced a problem we can't solve. We want to have a image in background of this form:

<form asp-controller="Notes" asp-action="Index" method="get">
        <p1>
            Hashtag: @Html.DropDownList("noteHashtag", "All")
            Name: <input type="text" name="SearchString">
            <input type="submit" value="Filter" />
        </p1>
    </form>

we tried doing stuff like adding to p1 or form this:

style="background-image:url(//images///images/SearchBg.jpg)"

but its not working. We're learning in ASP.NET core 1.0.0. Thanks for replies

Rion Williams · Accepted Answer · 2016-04-19 13:21:49Z

11

This is likely because you are targeting your image via a relative URL, which is going to be made relative to the View that it appears in.

This would generally be resolved by using the Url.Content() helper method to avoid any relative pathing issues by using an absolute path instead :

<form ... style="background: url('@Url.Content("~/images/images/SearchBg.jpg")');">
   <!-- Your content here -->
</form>

Alternative: Consider Using CSS Styles

You can resolve your relative pathing issues in this case by not referencing your images relative to the Views they are defined in but instead referencing them within your CSS file.

Consider creating a style in your CSS file that resembles the following :

.search-background {
    /* Ensure that the relative URL used is from your CSS file to the target image! */
    background: url('/images/searchBg.jpeg');
}

As long as your URL is correct there, then you should have no problem simply adding a class attribute onto your form to resolve the image properly and apply the background :

<form ... class='search-background'>
    <!-- Your content here -->
</form>

edited Apr 19, 2016 at 13:21

answered Apr 19, 2016 at 13:05

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kacper Werema Over a year ago

Ok we figured it out, that the auto path was wrong: it was: "//images///images/SearchBg.jpg" and should be just like this: "/images/SearchBg.jpg". Anyway thanks for your answer :)

Rion Williams Over a year ago

That's good. You always want to ensure that you have quotes around the target URLs as well to avoid any types of discrepancies that can come from that. The images/images looked a bit off to me, but you never know :)

Kacper Werema Over a year ago

Im gonna remember this for future. Anyway sorry but i lack points at moment to give you the reputation, but once i'll get it im gonna vote you up :)

Fahimeh Ahmadi · Accepted Answer · 2021-04-26 14:51:21Z

1

<section class="hero-wrap" 
   style="background-image: url('@Url.Content("~/assets/images/bg_1.jpg")');" >
  <span class="subheading">Hi There!</span>
</section>

answered Apr 26, 2021 at 14:51

Fahimeh Ahmadi

1,04312 silver badges14 bronze badges

1 Comment

M-Chen-3 Over a year ago

Please explain what your code does and how it does it.

shivanand s gaddi · Accepted Answer · 2016-04-19 13:29:09Z

0

Your Edited code : I Applied one cssclass named as 'masterForm' :

<form asp-controller="Notes" asp-action="Index" method="get" class="masterForm">
        <div>
            Hashtag: @Html.DropDownList("noteHashtag", "All")
            Name: <input type="text" name="SearchString">
            <input type="submit" value="Filter" />
        </div>
    </form>

Use div OR table for form design because we are not get particula alignment from paragraph tags.

Add the .css link reference file in master page.

Then add css attribute to 'masterForm' class and i added one image file URL as:

.masterForm
{
    background-image: url('nature.jpg');
}

answered Apr 19, 2016 at 13:29

shivanand s gaddi

385 bronze badges

Comments

Ivan Silkin · Accepted Answer · 2022-10-09 16:43:11Z

0

In my case, in order to set the background of anything on the page correctly, the Images folder should be placed inside the wwwroot instead of project directory. It only works fine this way.

edited Oct 9, 2022 at 16:43

answered Jun 9, 2022 at 16:08

Ivan Silkin

5131 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

Asp.net core setting background in <form>

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related